• 1
  • 2
Home > Tips

108 Beautiful CSS3 Buttons Free Download & How to Create the CSS3 Buttons


 

 

 

 


 

 108 Beautiful CSS3 Buttons Free Download - You Will Never Miss

Nowadays, we can make buttons nearly without any related graphics. Why? Because we can use CSS3 to create beautiful buttons even though we dont have the related graphics (Of course some browsers with lower versions may not support these kinds of button effects).

Today, SliceMaker Soft will share 108 beautiful CSS3 buttons with you, you can free download them and then edit them for your own use, just enjoy!

In the following passage, SliceMaker Soft will also show you the related HTML and CSS codes for the CSS3 buttons; we hope it will help you know how to create these kinds of CSS3 buttons.



 HTML Codes for the CSS3 Buttons

The HTML structure for the CSS3 buttons is very simple; you can make it using any element or tag. However, the frequently-used elements or tags are <a> and <button>. For the above CSS3 buttons, we used the <a> tag.

<!--Create 3D buttons-->
<a href='javascript:void(0)' class='button-bevel orange'> <span class='refresh'></span> Refresh </a>
<!--Create Buttons-->
<a href='javascript:void(0)' class='button orange'> <span class='refresh'></span> Refresh </a>
<!--Created Rounded Corner Buttons -->
<a href='javascript:void(0)' class='button rounded orange'> <span class='refresh'></span> Refresh </a>



 CSS Codes for the CSS3 Buttons

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.

 

/*Use google fonts*/
@import url(http://fonts.googleapis.com/css?family=Arvo);
/*Give body a radial gradient image*/
body {
  background: #f8fcd4;
  background: radial-gradient(center, ellipse cover,  #f8fcd4 19%,#dbfacb 100%);
  background-attachment: fixed;
}
/*The basic layout of demo page*/
.demo {
  text-align: center;
  display: block;
  width: 800px;
  margin: 50px auto;
}
@font-face {
  font-family: 'EntypoRegular';
  src: url('font/entypo-webfont.eot');
  src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/entypo-webfont.woff') format('woff'),
       url('font/entypo-webfont.ttf') format('truetype'),
       url('font/entypo-webfont.svg#EntypoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.button,
.button-bevel {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 7px 20px 9px;
  margin: .5em .5em .5em 0;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  text-transform: capitalize;
  transition: 0.1s linear;
}

.button {
  border-radius: 2px;
  box-shadow: inset rgba(255,255,255,0.3) 1px 1px 0;
}
/*The hover effect of the buttons*/
.button:hover,
.button-bevel:hover {
  color: #fff;
  text-decoration: none;
}
/*The active effect of the buttons */ 
.button:active {
  box-shadow: inset rgba(0,0,0,0.4) 0px 0px 6px;
}
/*Rounded buttons */
.rounded {
  border-radius: 20px;
}
/*Orange buttons */
.orange {
  background: rgb(255,183,0);
  background: -*-linear-gradient(to bottom,  rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
  border: 1px solid #e59500;
}
 
.orange:hover {
  background: rgb(255,203,72);
  background: -*-linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
}
/*Red buttons */ 
.magenta {
  background: rgb(255,130,172);
  background: -*-linear-gradient(to bottom,  rgba(255,130,172,1) 0%,rgba(247,37,129,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff82ac', endColorstr='#f72581',GradientType=0 );
  border: 1px solid #c60a56;
}
 
.magenta:hover {
  background: rgb(255,155,189);
  background: -*-linear-gradient(to bottom,  rgba(255,155,189,1) 0%,rgba(248,62,143,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9bbd', endColorstr='#f83e8f',GradientType=0 );
}
/*Blue buttons */
.cyan {
  background: rgb(130,207,241);
  background: -*-linear-gradient(to bottom,  rgba(130,207,241,1) 0%,rgba(56,174,234,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cff1', endColorstr='#38aeea',GradientType=0 );
  border: 1px solid #3cafcf;
}
 
.cyan:hover {
  background: rgb(153,216,244);
  background: -*-linear-gradient(to bottom,  rgba(153,216,244,1) 0%,rgba(79,183,236,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d8f4', endColorstr='#4fb7ec',GradientType=0 );
}
/*Bright red buttons*/ 
.red {
  background: #e25b53;
  background: -*-linear-gradient(to bottom,  #e25b53 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e25b53', endColorstr='#dd2011',GradientType=0 );
  border: 1px solid #c42222;
}

.red:hover {
  background: #dd7671;
  background: -*-linear-gradient(to bottom,  #dd7671 0%,#dd2011 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd7671', endColorstr='#dd2011',GradientType=0 );
}
/*Black buttons*/ 
.black {
  background: #444444;
  background: -*-linear-gradient(to bottom,  #444444 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#1c1c1c',GradientType=0 );
  border: 1px solid #2a2a2a;
}

.black:hover {
  background: #686868;
  background: -*-linear-gradient(to bottom,  #686868 0%,#1c1c1c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#1c1c1c',GradientType=0 );
}
/*Green buttons */
.green {
  background: #82cc5d;
  background: -*-linear-gradient(to bottom,  #82cc5d 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82cc5d', endColorstr='#53b73c',GradientType=0 );
  border: 1px solid #429E34;
}

.green:hover {
  background: #99cc80;
  background: -*-linear-gradient(to bottom,  #99cc80 0%,#53b73c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cc80', endColorstr='#53b73c',GradientType=0 );
}
/*3D buttons*/
.button-bevel {
  vertical-align: top;
  border-radius: 4px;
  border: none;
  padding: 10px 25px 12px;
}
 
.button-bevel:active {
  position: relative;
  top: 5px;
}
 
.button-bevel.orange {
  box-shadow: #c46d00 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.orange:active {
  box-shadow: #c46d00 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
}
 
.button-bevel.magenta {
  box-shadow: #ca075c 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.magenta:active {
  box-shadow: #ca075c 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
}
 
.button-bevel.cyan {
  box-shadow: #1994d3 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.cyan:active {
  box-shadow: #1994d3 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
 }
 
.button-bevel.red {
  box-shadow: #88180e 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.red:active {
  box-shadow: #88180e 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
}
 
.button-bevel.black {
  box-shadow: #000 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px;
}

.button-bevel.black:active {
  box-shadow: #000 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px, inset rgba(255, 255, 255, 0.3) 0 0 3px; 
}
 
.button-bevel.green {
  box-shadow: #439230 0 6px 0px, rgba(0, 0, 0, 0.3) 0 10px 3px;
}

.button-bevel.green:active {
  box-shadow: #439230 0 3px 0, rgba(0, 0, 0, 0.2) 0 6px 3px; 
}
.button span,
.button-bevel span {
  font-family: 'EntypoRegular';
  font-size: 20px;
  font-weight: normal;
  vertical-align: middle;
  line-height: 0;
  margin-right: .1em;
}

.refresh:after { content: 'h'; font-size: 34px; }
.shuffle:after { content: 'f'; font-size: 34px; }
.preview:after { content: 'M'; font-size: 34px; }
.tea:after { content: 'u'; font-size: 34px; }
.wifi:after { content: 'T'; font-size: 34px; }
.locator:after { content: '0'; font-size: 34px; }
 
.rss:after { content: 'S'; font-size: 34px; }
.cloud:after { content: 'y'; font-size: 34px; }
.download:after { content: 'w'; font-size: 34px; }
.trash:after { content: 'I'; font-size: 34px; }
.rack:after { content: 't'; font-size: 34px; }
.map:after { content: '1'; font-size: 34px; }
 
.setting:after { content: '@'; font-size: 34px; }
.identity:after { content: '.'; font-size: 34px; }
.navigation:after { content: '2'; font-size: 34px; }
.gallery:after { content: 'p'; font-size: 34px; }
.email:after { content: '%'; font-size: 34px; }
.users:after { content: '+'; font-size: 34px; }
 
.calendar:after { content: 'P'; font-size: 34px; }
.link:after { content: '>'; font-size: 34px; }
.time:after { content: 'N'; font-size: 34px; }
.folder:after { content: 's'; font-size: 34px; }
.tag:after { content: 'C'; font-size: 34px; }
.share:after { content: '5'; font-size: 34px; }
 
.lock:after { content: 'U'; font-size: 34px; }
.unlock:after { content: 'V'; font-size: 34px; }
.mic:after { content: 'O'; font-size: 34px; }
.love:after { content: '6'; font-size: 34px; }
.star:after { content: '7'; font-size: 34px; }
.like:after { content: '8'; font-size: 34px; }
 
.phone:after { content: '!'; font-size: 34px; }
.flag:after { content: '?'; font-size: 34px; }
.adduser:after { content: '-'; font-size: 34px; }
.attach:after { content: '''; font-size: 34px; }
.comment:after { content: ':'; font-size: 34px; }
.edit:after { content: '&'; font-size: 34px; }
 
.upload:after { content: 'v'; font-size: 34px; }
.storage:after { content: 'x'; font-size: 34px; }
.photo:after { content: 'D'; font-size: 34px; }
.help:after { content: 'K'; font-size: 34px; }
.glass:after { content: 'R'; font-size: 34px; }
.print:after { content: '<'; font-size: 34px; }
 
.gadget:after { content: '''; font-size: 34px; }



 Terms of use for the Add to Cart Buttons

The CSS3 buttons are created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the CSS3 buttons and then edit them for their own use. If you are interested in these CSS3 buttons, please feel free to download them. If you have problem understanding or editing the CSS3 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