<div id="body">
<input class="cartButton one" type="submit" value="Add To Cart">
<input class="cartButton two" type="submit" value="Add To Cart">
<input class="cartButton three" type="submit" value="Add To Cart">
<input class="cartButton four" type="submit" value="Add To Cart">
<input class="cartButton five" type="submit" value="Add To Cart">
</div>
html {
min-width:100%;
min-height:100%;
}
body {
background:#333;
}
/* ////////////////////////////////////////////////////////////////
// Add To Cart Button //
//////////////////////////////////////////////////////////////// */
input[type="submit"] {
padding: 7px 21px;
font-size: 18px;
background: #c90c12;
outline: none;
border: 3px solid #dbdbdb;
color: #EFEFEF;
font-weight: 200;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
input[type="submit"]:hover {
cursor: pointer;
background:#d30c12;
}
/* /////////////////////////////////////////////
// Button 1 Style \\
///////////////////////////////////////////// */
.cartButton.one {
border-radius: 3px;
margin-bottom: -18px;
margin:20px 45%;
}
.cartButton.one:hover {
outline:3px solid #c50b11;
text-shadow: 1px 1px 3px #910000;
-moz-box-shadow: 0 0 0 #910000;
-webkit-box-shadow: 0 0 0 #910000;
box-shadow: 0 0 0 #910000;
}
/* /////////////////////////////////////////////
// Button 2 Style \\
///////////////////////////////////////////// */
.cartButton.two {
border-radius: 3px;
margin-bottom: -18px;
margin:20px 45%;
}
.cartButton.two:hover {
border:3px solid #c50b11;
text-shadow: 1px 1px 3px #910000;
-moz-box-shadow: 0 0 0 #910000;
-webkit-box-shadow: 0 0 0 #910000;
box-shadow: 0 0 0 #910000;
}
/* /////////////////////////////////////////////
// Button 3 Style \\
///////////////////////////////////////////// */
.cartButton.three {
border-radius: 3px;
margin-bottom: -18px;
margin:20px 45%;
}
.cartButton.three:hover {
border:3px solid #AD0000;
text-shadow: 0 1px 3px #660000;
-moz-box-shadow: 0 0 0 #660000;
-webkit-box-shadow: 0 0 0 #660000;
box-shadow: 0 0 0 #660000;
border-radius:10px 0;
}
/* /////////////////////////////////////////////
// Button 4 Style \\
///////////////////////////////////////////// */
.cartButton.four {
border-radius: 50%;
margin-bottom: -18px;
margin:20px 45%;
}
.cartButton.four:hover {
border-top:3px solid #AD0000;
border-bottom:3px solid #AD0000;
border-left:3px solid #efefef;
border-right:3px solid #efefef;
text-shadow: 0 1px 3px #660000;
-moz-box-shadow: 0 0 0 #660000;
-webkit-box-shadow: 0 0 0 #660000;
box-shadow: 0 0 0 #660000;
border-radius: 20%;
}
/* /////////////////////////////////////////////
// Button 5 Style \\
///////////////////////////////////////////// */
.cartButton.five {
border-radius: 0 0 100% 100%;
margin-bottom: -18px;
margin:20px 45%;
}
.cartButton.five:hover {
border:3px solid #AD0000;
text-shadow: 0 1px 3px #660000;
-moz-box-shadow: 0 0 0 #660000;
-webkit-box-shadow: 0 0 0 #660000;
box-shadow: 0 0 0 #660000;
border-radius:20% 20%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.