Creative: pure Css3 Download Button

Today in this tutorial we learn about how to design and customize awesome download buttons in minutes. Button states saved as images and toggled by CSS are so out of date and also it’s painful for every website developer. we'll cover prettying it up using CSS, including some CSS3!. We all know why: they’re easily editable, cross-platform, lightweight, accessible. Below you can see samples of just some of download buttons designs you can develop by spending few minutes.

 

You’re free to change any of the hex colors you see in the CSS and the button background color will change instantly.The buttons are free for personal and commercial use, so download them now and start tweaking them for your brand.

Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. hile declaring the a solid color uses background-color property in CSS, gradients use background-image. This comes in useful in a few ways.

 

How To Use These Buttons In Your Blog

 

1. Go to Template > Edit HTML.
2. Locate the <b:skin> tag near the top of the template.
3. Copy the code below and insert it right below the tag.

/* === Button Style === */
.mbt-button {
background-color: #0C464A;
background-image: -o-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -moz-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -webkit-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: -ms-linear-gradient(bottom, #0C464A 0%, #276268 100%);
background-image: linear-gradient(to bottom, #0C464A 0%, #276268 100%);
border: 1px solid #0C464A;
border-bottom: 1px solid #0C464A;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #0D5357;
-webkit-box-shadow: 0 1px 0 0 #0D5357 inset ;
-moz-box-shadow: 0 1px 0 0 #0D5357 inset;
-ms-box-shadow: 0 1px 0 0 #0D5357 inset;
-o-box-shadow: 0 1px 0 0 #0D5357 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #0D5357;
box-shadow: 0 0 10px 5px #0D5357 inset;
-webkit-box-shadow:0 0 10px 5px #0D5357 inset ;
-moz-box-shadow: 0 0 10px 5px #0D5357 inset;
-ms-box-shadow: 0 0 10px 5px #0D5357 inset;
-o-box-shadow: 0 0 10px 5px #0D5357 inset;
}

 

Save, view your blog.

 

Now time to call button style when you writing a post..

your normal link will look like this..

 

<a  href="Here is Your Page Link"> Css3 Button </a>

 

Just wrap an anchor tag around a button element. ( In our case after applying button element our link look like this.)

 

<a class="mbt-button" href="Here Is Your Page Link"> Css3 Button </a>

 

Style 2

/* === Button Style === */
.mbt-button {
background-color: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
border: 1px solid #0d73b3;
border-bottom: 1px solid #0d73b3;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #0d73b3;
-webkit-box-shadow: 0 1px 0 0 #0d73b3 inset ;
-moz-box-shadow: 0 1px 0 0 #0d73b3 inset;
-ms-box-shadow: 0 1px 0 0 #0d73b3 inset;
-o-box-shadow: 0 1px 0 0 #0d73b3 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #0d73b3;
box-shadow: 0 0 10px 5px #0d73b3 inset;
-webkit-box-shadow:0 0 10px 5px #0d73b3 inset ;
-moz-box-shadow: 0 0 10px 5px #0d73b3 inset;
-ms-box-shadow: 0 0 10px 5px #0d73b3 inset;
-o-box-shadow: 0 0 10px 5px #0d73b3 inset;
}

 

Style 3

/* === Button Style === */

.mbt-button {
background-color: #446CB3;
  background-image: -webkit-linear-gradient(top, #446CB3, #2959ab);
  background-image: -moz-linear-gradient(top, #446CB3, #2959ab);
  background-image: -ms-linear-gradient(top, #446CB3, #2959ab);
  background-image: -o-linear-gradient(top, #446CB3, #2959ab);
  background-image: linear-gradient(to bottom, #446CB3, #2959ab);
border: 1px solid #446CB3;
border-bottom: 1px solid #446CB3;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #446CB3;
-webkit-box-shadow: 0 1px 0 0 #446CB3 inset ;
-moz-box-shadow: 0 1px 0 0 #446CB3 inset;
-ms-box-shadow: 0 1px 0 0 #446CB3 inset;
-o-box-shadow: 0 1px 0 0 #446CB3 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}

.mbt-button:hover {
opacity:.85;
cursor: pointer;
}

.mbt-button:active {
border: 1px solid #446CB3;
box-shadow: 0 0 10px 5px #446CB3 inset;
-webkit-box-shadow:0 0 10px 5px #446CB3 inset ;
-moz-box-shadow: 0 0 10px 5px #446CB3 inset;
-ms-box-shadow: 0 0 10px 5px #446CB3 inset;
-o-box-shadow: 0 0 10px 5px #446CB3 inset;
}

 

Style 4

/* === Button Style === */

.mbt-button {
background-color: #68b12f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
background-image: -webkit-linear-gradient(top, #68b12f, #50911e);
background-image: -moz-linear-gradient(top, #68b12f, #50911e);
background-image: -ms-linear-gradient(top, #68b12f, #50911e);
background-image: -o-linear-gradient(top, #68b12f, #50911e);
background-image: linear-gradient(top, #68b12f, #50911e);
border: 1px solid #509111;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
box-shadow: inset 0 1px 0 0 #9fd574;
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: bold;
padding: 8px 25px;
text-align: center;
text-shadow: 0 -1px 0 #396715;
}
.mbt-button:hover {
opacity:.85;
cursor: pointer;
}
.mbt-button:active {
border: 1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

 

We hope these buttons gives you some inspiration for creating some nice effects.

Got a question or need help customizing this CSS code? If you have a comment or suggestion instead, post it in the comments section below.