After sharing on how to add Attractive Animated Bubble Buttons Using CSS3 for blogger this measure we are distribution another caller 3D Depressible Button. Cascading Style Sheet (CSS) is a ticker of every web decorator.We can't envisage that,what can a grownup web designer make with using CSS3. The biggest advantage of these buttons is they are made from pure CSS that means no any load on your website/blog. It uses CSS2 pseudo element to add a lower 3D side to the link, and CSS3 shadows and transition to complete the look. To overcome a severe limitation of Google Chrome and Safari at the time of writing not supporting CSS3 transitions on pseudo elements, we use the "inherit" technique, so the 3D side of the button is animated when the user presses down on the button. Now lets go to the tutorial and see how to add this and use this.
Note that the default "depth" of the 3D effect is 12px. If you need to increase or decrease this value, change the "12px" value that occurs 3 times in the CSS.
Now you have added the styles of buttons into your blog,lets see how to use them.
How To Add These Buttons To Blogger?
First we will add CSS code and then we will see the HTML part i.e. how to use them.- Go to Blogger Dashboard > Template
- Click on Edit HTML
- Hit Proceed button
- Find below code in your template
add below code just above it,]]></b:skin>
Save your template.
.css3dbutton {
background: darkred; /* background color of button */
color: white;
text-decoration: none;
font: bold 28px Arial; /* font size and style */
position: relative;
top: 0; /* anchor main button's position */
bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
margin-bottom: 12px;
-moz-box-shadow: 0 -15px 5px darkred inset;
-webkit-box-shadow: 0 -15px 5px darkred inset;
box-shadow: 0 -15px 5px darkred inset;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.css3dbutton, .css3dbutton:after {
display: inline-block;
padding: 10px 15px; /* vertical and horizontal padding of button */
-moz-border-radius: 8px/15px;
-webkit-border-radius: 8px/15px;
border-radius: 8px/15px;
outline: none;
}
.css3dbutton:after { /* pseudo element to construct 3D side of button */
content: "";
position: absolute;
padding: 0;
z-index: -1;
bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
left: 0;
width: 100%;
height: 100%;
background: #6e0e0c; /* background color of 3D effect */
-moz-box-shadow: 1px 0 3px gray;
-webkit-box-shadow: 1px 0 3px gray;
box-shadow: 1px 0 3px gray;
}
.css3dbutton:hover {
-moz-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
-webkit-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;
background: #bc3835; /* background color when mouse rolls over button */
}
.css3dbutton:active {
top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
bottom: 0;
-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
Now you have added the styles of buttons into your blog,lets see how to use them.
How To Use These Buttons?
These buttons are very easy to use,below I am giving HTML Code of all types of button.Follow below simple steps to use them while writing posts,- While editing post click on Edit HTML tab
- Choose your button code below and paste it
- Replace links and link names with yours,
HTML Code
<center><a href="LINK HERE!" class="css3dbutton">YOUR TEXT HERE!</a></center>
- Replace LINK HERE with link URL
- Replace YOUR TEXT HERE with the text which you want to appear on the button.
