Simple and Neat Css3 Gradient Buttons For Your Website

Views

The Yellow Bulb¦Information Worth SharingCSS stands for (Cascading Style Sheet) is designed primarily to enable the separation of document content, including elements such as the layout, colors, and fonts. I'm saying "CSS3", because these make use of gradients, shadows, and rounded corners. This CSS3 buttons can be for  blogger/blogspot or any type of website as long as you have an access to your Css Style Sheet. This can be a “Live Demo” “Preview” or even a “Download” button. A little bit info about this buttons - it has a pretty clean and neat style no other transition effect just Hover and Active. Square and curve borders and very easy to be installed. You can use the six  different  gradient (BLUE, DARK BLUE, GREEN, PURPLE, GREY, BLACK) colors whenever matches the need of the situation. As I’ve said this is just a simple and neat CSS3 buttons. Unfortunately, In older Browsers does not support these properties, the fallback is solid-color background, no shadows, and square corners. Not really a big deal. Alright, if you want this on your website – just keep reading.

INSTALLING CSS3 BUTTON STYLES  ON YOUR BLOGGER TEMPLATE
  • Go to your blogger dashboard
  • Template
  • Edit HTML
  • Proceed
  • Click “Expand Widget Template”
  • Press CTRL+F for search shortcut
  • And locate this piece of code

]]></b:skin>

  • Alright, and just above/before that – insert this CSS styles

/*-----THE YELLOW BULB CSS3 BUTTONS START-----*/


.button {
  width: 170px; /*TWEAK THIS TO ADJUST WIDTH*/ 
  height: 28px; /*TWEAK THIS TO ADJUST HEIGHT*/
  padding: 15px 15px;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
  text-decoration: none;
text-shadow:1px 0px 3px #000000;
  text-align: center;
  vertical-align: middle;}

.blue {
   border-top: 3px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#0d3b59), to(#65a9d7));
   background: -webkit-linear-gradient(top, #0d3b59, #65a9d7);
   background: -moz-linear-gradient(top, #0d3b59, #65a9d7);
   background: -ms-linear-gradient(top, #0d3b59, #65a9d7);
   background: -o-linear-gradient(top, #0d3b59, #65a9d7);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
  -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   color: #ffffff;
   }
.blue:hover {
   border-top-color: #14596e;
   background: #14596e;
   color: #ccc;
   }
.blue:active {
   border-top-color: #5290ba;
   background: #5290ba;
   }

.darkblue{
   border-top: 3px solid #dae3e8;
   background: #27597a;
   background: -webkit-gradient(linear, left top, left bottom, from(#0a1a30), to(#27597a));
   background: -webkit-linear-gradient(top, #0a1a30, #27597a);
   background: -moz-linear-gradient(top, #0a1a30, #27597a);
   background: -ms-linear-gradient(top, #0a1a30, #27597a);
   background: -o-linear-gradient(top, #0a1a30, #27597a);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px; 
   -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   }
.darkblue:hover {
   border-top-color: #14323b;
   background: #14323b;
   color: #ccc;
   }
.darkblue:active {
   border-top-color: #728591;
   background: #728591;
   }

.green {
   border-top: 3px solid #ffffff;
   background: #386915;
   background: -webkit-gradient(linear, left top, left bottom, from(#0b4d15), to(#386915));
   background: -webkit-linear-gradient(top, #0b4d15, #386915);
   background: -moz-linear-gradient(top, #0b4d15, #386915);
   background: -ms-linear-gradient(top, #0b4d15, #386915);
   background: -o-linear-gradient(top, #0b4d15, #386915);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
  -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   }
.green:hover {
   border-top-color: #bf9822;
   background: #bf9822;
   color: #000000;
   }
.green:active {
   border-top-color: #2a8c0a;
   background: #2a8c0a;
   }

.purple {
   border-top: 3px solid #757575;
   background: #eb26c7;
   background: -webkit-gradient(linear, left top, left bottom, from(#a020c4), to(#eb26c7));
   background: -webkit-linear-gradient(top, #a020c4, #eb26c7);
   background: -moz-linear-gradient(top, #a020c4, #eb26c7);
   background: -ms-linear-gradient(top, #a020c4, #eb26c7);
   background: -o-linear-gradient(top, #a020c4, #eb26c7);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
  -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   }
.purple:hover {
   border-top-color: #380b45;
   background: #380b45;
   color: #000000;
   }
.purple:active {
   border-top-color: #726778;
   background: #726778;
   }

.grey{
   border-top: 3px solid #757575;
   background: #e3d7e1;
   background: -webkit-gradient(linear, left top, left bottom, from(#736c75), to(#e3d7e1));
   background: -webkit-linear-gradient(top, #736c75, #e3d7e1);
   background: -moz-linear-gradient(top, #736c75, #e3d7e1);
   background: -ms-linear-gradient(top, #736c75, #e3d7e1);
   background: -o-linear-gradient(top, #736c75, #e3d7e1);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
  -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   }
.grey:hover {
   border-top-color: #3d3d3d;
   background: #3d3d3d;
   color: #ffffff;
   }
.grey:active {
   border-top-color: #000000;
   background: #000000;
   }

.black {
   border-top: 3px solid #757575;
   background: #4f4b4e;
   background: -webkit-gradient(linear, left top, left bottom, from(#141414), to(#4f4b4e));
   background: -webkit-linear-gradient(top, #141414, #4f4b4e);
   background: -moz-linear-gradient(top, #141414, #4f4b4e);
   background: -ms-linear-gradient(top, #141414, #4f4b4e);
   background: -o-linear-gradient(top, #141414, #4f4b4e);
   -webkit-border-radius: 9px;
   -moz-border-radius: 9px;
   border-radius: 9px;
   -webkit-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-moz-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-o-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
-ms-box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
box-shadow:0px 9px 86px -14px rgba(51, 51, 51, 100);
   }
.black:hover {
   border-top-color: #545254;
   background: #545254;
   color: #000000;
   }
.black:active {
   border-top-color: #ababab;
   background: #ababab;
   }

/*-----THE YELLOW BULB CSS3 BUTTONS END-----*/

 

<div class="button blue">BLUE</div>



<div class="button darkblue">DARK BLUE</div>


<div class="button green">GREEN</div>


<div class="button purple">PURPLE</div>


<div class="button grey">GREY</div>



<div class="button black">BLACK</div>

The Yellow Bulb¦Information Worth Sharing

  •  Save your template.
ADDING THE BUTTONS ON YOUR BLOG POST
  • Create a  new post
  • Click HTML tab
  • and insert your desired CSS3 button code, for ex:

<div class=’button green’>YOUR TEXT GOES HERE</div>

CUSTOMIZING YOUR CSS3 BUTTONS
  • Change the default width and height of your choice
  • Change the font size 17px if needed
  • Replace color: ffffff to change text color