• 1
  • 2
Home > Tips

Add to Cart Button - Add to Cart Button Free Download



 

 

 

 


 


 Add to Cart Button - Add to Cart Button Free Download

Do you want to use CSS3 to create add to cart button? I guess your answer must be positive. Today, SliceMaker Soft would like to share some beautiful add to cart buttons with you and you can free download the add to cart buttons for your own website.

The above CSS3 add to cart buttons are created using CSS3 properties including CSS3 gradient property, CSS3 box-shadow property, CSS3 pseudo-class property and @font-face property.  The following passage will also show you the related HTML codes and CSS codes and there are necessary explanations within the codes.



 HTML Codes for the Add to Cart Buttons

<button name='add to card' type='button' class='blue'>add to cart</button>
<button name='add to card' type='button' class='green'>add to cart</button>
<button name='add to card' type='button' class='purple'>add to cart</button>
<button name='add to card' type='button' class='yellow'>add to cart</button>
<button name='add to card' type='button' class='blueness'>add to cart</button>

Note: If you want to change the colors of the buttons, please simply change a name of the color to another name of a color, for example, if you want to change the first buttons color from blue to black, you can simple use the word black to replace the word blue, thats all!



 CSS Codes for the Add to Cart Buttons

 /*Explanation: Default styles */
body {
  background-color:rgb(230,230,230);
}
.demo {
  width: 235px;
  margin: 50px auto;
}
/*Explanation: Basic styles of the buttons*/
button {
  line-height:48px;
  padding:0 25px 0 85px;
  position:relative;
  color:#fff;
  border:none;
  border-radius:3px;
  font-size:15px;
  font-weight:bold;
  text-transform:uppercase;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  margin:10px;
}
/*Explanation: Use pseudo-class to create the shopping cart icons */
button:before {
  content:'b';
  font-family:'cart-icon';
  font-size:30px;
  text-transform:none;
  text-shadow: 0 1px 0 rgba(0,0,0,1);
  position:absolute;
  left:-1px;
  top:-1px;
  background-color:rgb(80,82,78);
  height:48px;
  width:60px;
  color:#fff;
  border-radius:3px 0 0 3px;
  border:1px solid rgb(75,75,75);
  border-right:none;
  box-shadow:inset 1px 1px 0 rgb(120,120,120);
  z-index: 3;
}
/*Explanation: The blue button*/
.blue {
  background-image:-*-linear-gradient(top,rgb(120,170,210),rgb(104,157,193));
  border:1px solid rgb(81,132,171);
  box-shadow: inset -1px 1px 0 rgb(154,194,221),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*Explanation: The green button*/
.green {
  background-image:-*-linear-gradient(top,rgb(80,188,98),rgb(65,172,86));
  border:1px solid rgb(64,152,80);
  box-shadow: inset -1px 1px 0 rgb(137,207,152),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*Explanation: The yellow button*/
.yellow {
  background-image:-*-linear-gradient(top,rgb(150,130,72),rgb(108,94,53));
  border:1px solid rgb(147,129,75);
  box-shadow: inset -1px 1px 0 rgb(170,163,123),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*Explanation: The purple button*/
.purple {
  background-image:-*-linear-gradient(top,rgb(140,90,164),rgb(130,73,149));
  border:1px solid rgb(155,90,175);
  box-shadow: inset -1px 1px 0 rgb(160,120,180),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*Explanation: The light blue button*/
.blueness {
  background-image:-*-linear-gradient(top,rgb(82,180,181),rgb(65,162,163));
  border:1px solid rgb(73,163,167);
  box-shadow: inset -1px 1px 0 rgb(128,199,199),0 1px 0 rgb(182,182,180),0 2px 0 rgb(197,195,197),0 3px 0 rgb(211,213,210);
}
/*Call server font styles*/
@font-face {
  font-family: 'cart-icon';
  src: url('font/cart-icon.eot');
  src: url('font/cart-icon.eot?#iefix') format('embedded-opentype'),
  url('font/cart-icon.svg#cart-icon') format('svg'),
  url('font/cart-icon.woff') format('woff'),
  url('font/cart-icon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

Note: The texts within the CSS codes that are bold like this /*bold*/ are the explanations, we use them to help you understand better why we use the codes.



 Terms of use for the Add to Cart Buttons

The add to cart buttons are created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the add to cart buttons and then edit them for their own use. If you are interested in these add to cart buttons, please feel free to download them. If you have problem understanding or editing the add to cart buttons, please feel free to contact our support team (support@slicemaker.com). 



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0