<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%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.