Css Button With Drop Shadow Effect

Every website need the button on the page, button is the main focus to capture the user input data for the website. Today I am also discussing about the button and how we can better use the CSS3 to create the nice and elegant and fancy normal and 3D buttons. In old traditional method we use the button html control in the web page, But it looks was not elegant like Button created in CSS3. We are going to use also same old button html control with CSS3 and it make the button to nice and with good transition effects. We can create the beautiful rounded corner css button using css3 which we can;t do with older version of css. Before we are going to use of css we need to create the html button control using the following syntax. We can place button to any other html container on the web page.

How to Make Icons Buttons With Various top and under shadow Effects . Sometimes from a button on a page posting we can make visitors to be impressed and want to also put it on their blogs , because the buttons have a certain appeal in terms of both appearance and color and this time I was right to share a tutorial how to create a button on the post pages blog with Transition Background effect .

Let's start to add the Icons Buttons With Various Effects:

Step 1: Login to your blogger panel admin

Step 2: Click On Template » Edit HTML

Step 3: Using Ctrl+F Find the code ]]></b:skin> or </style>
Step 4: Add this code just above the code </skin> or </style>
Step 5: Save Template.

button{position: relative;color: rgba(255,255,255,1);text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight: bold ;font-size: 2.2em;display: block;padding: 20px;margin: 120px auto;width: 240px;text-align: center;border:0px;outline:0px;} /* css for TOP */.top { background-color: rgba(153,14,153,1);-webkit-transition: all .1.5s ease;-moz-transition: all .1.5s ease;-ms-transition: all .1.5s ease;-o-transition: all .1.5s ease;transition: all .1.5s ease; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; -webkit-box-shadow: 0px 0px 25px rgba(0,0,0,.7), 0px -9px 0px rgba(105,7,105,1);-moz-box-shadow: 0px 0px 25px rgba(0,0,0,.7), 0px -9px 0px rgba(105,7,105,1);box-shadow: 0px 0px 25px rgba(0,0,0,.7), 0px -9px 0px rgba(105,7,105,1); }
.top:active{ -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.9), 0px -3px 0px rgba(153,14,153,1);-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.9), 0px -3px 0px rgba(153,14,153,1);box-shadow: 0px 0px 6px rgba(0,0,0,.9), 0px -3px 0px rgba(153,14,153,1);position: relative;top: 10px;border:0px;}/* css for Under */.under { background-color: rgba(105,7,105,1);-webkit-transition: all .1.5s ease;-moz-transition: all .1.5s ease;-ms-transition: all .1.5s ease;-o-transition: all .1.5s ease;transition: all .1.5s ease; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-webkit-box-shadow: 0px 9px 0px rgba(153,14,153,1), 0px 9px 25px rgba(0,0,0,.7);-moz-box-shadow: 0px 9px 0px rgba(153,14,153,1), 0px 9px 25px rgba(0,0,0,.7);box-shadow: 0px 9px 0px rgba(153,14,153,1), 0px 9px 25px rgba(0,0,0,.7);
}
.under:active{ -webkit-box-shadow: 0px 3px 0px rgba(153,14,153,1), 0px 3px 6px rgba(0,0,0,.9);-moz-box-shadow: 0px 3px 0px rgba(153,14,153,1), 0px 3px 6px rgba(0,0,0,.9);box-shadow: 0px 3px 0px rgba(153,14,153,1), 0px 3px 6px rgba(0,0,0,.9);position: relative;top: 10px;border:0px;}

Step 6: Then add the following HTMLcode on the posting page area.

Top Shadow Effect

<button class="top">Top Shadow Effect</button>

Buttom Shadow Effect

<button class="under">Buttom Shadow Effect</button>

The Results

That's all about Css Button With Drop Shadow Effect , i hope this article can help you, also look forward for my next tutorial, thanks.
Source images : pixabay.com