How To Add 3D Depressible Button For Blogger

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.


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,

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

Save your template.

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

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Comments

  1. InnomaxMediaLLP says:

    Thank you for the work you have put into your nice blog. We will bookmark to your blog because it is very informational. We love the site and will come back to see your new posts.
    Web development Company

Speak Your Mind

*


*