CSS 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.
- 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 purple">PURPLE</div> <div class="button grey">GREY</div>
<div class="button darkblue">DARK BLUE</div>
<div class="button green">GREEN</div>
<div class="button black">BLACK</div> 
- Save your template.
- 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>
- Change the default width and height of your choice
- Change the font size 17px if needed
- Replace color: ffffff to change text color
No comments:
Post a Comment
● Be sure to click "Notify Me" below, to get notified for follow up response.
● Respect! Do not Spam/Flood, you will be banned if you do so.
● Admin will try to get back to you as soon as we possibly can.