WELCOME TO EHOST.COM.NP

Sunday, June 8, 2014

Creative: pure Css3 Download Button

ads space

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.

Pure Css3 download button

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 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..

Css3 Button

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

Css3 Button

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.

ads space
ADS SPACE

0 comments:

Post a Comment

Categories

Article How-to All Posts WordPress Android Web design Blogger Plugins CSS Google JQuery Plugins Programming Reviews Web Hosting Blogger Blogging Blogging Tips Tricks Web Development Facebook Git Internet Make Money Online Social Plugins Tips Tips and Tricks Tools Tutorials Windows WordPress Plugins Blogging Tips and Tricks Freebies GSM Google Analytics HTML How To's JavaScript Plugin Development S.E.O SEO SMS SmartPhone Social Media Tips amp; Tricks Top-Most Updates Webmaster Tools Whatsapp Applications Apps Blogger Basics Documentary Downloads Entertainment Gadgets Games Gmail Google AdSense Guest Post IPhone Make Money Blogging SVN Security Softwares Web Hosting Tips and Tricks Wordpress Tips Wordpress Tips and Tricks hostgator iOS Advertising Networks Advertising Technology Affiliates Antivirus Audience amp; Traffic Biography Blog post Blog post Blogger Blogger Errors Blogger Tips Blogger Tools Blogger Widget Blogosphere Bogger Widgets CSS selectors CSS symbols CSS3 Computer amp; Internet Content Writing Coupon Codes Data amp; Analytics Deleted blog Design DoubleClick for Publishers Email and newsletter marketting Email marketing Excel Tips Excel Tips and Tricks Facebook Tricks Feed Feedburner Feedburner subscribers Font Fun GitHub Giveaways Gmail primary inbox Gmail tabs Google sign-in Guides HTML amp; CSS HTML5 Infographics Inspirational Instagram Internet Marketing Internet Tips amp; Tricks Job Listings Knowledge Life Hacks Lists Make-Money Monetization amp; Conversion Monetize Navigation Online Marketing Other PHP Tutorials Passport Publishing amp; Content Quotes RSS Sidebar Smartphones Social Networking Status Tech Tech Blog Technology Telegram Themes UI / UX User Psychology amp; Research VB.Net Web Tools Web browser Widget Windows Tips Windows-10 ad viewability admin notice blogging tools bluehost cherry-pick clone cors custom scrollbar customizer dismissible notices duplicate post feed title git branch git clone gpg gpg2 hybridauth iPad icon font notice responsive wordpress theme same origin policy scrollbar signed git commit smartsvn theme customizer vcs wordpress theme wordpress themes

Blog Archive