Sliding Button for blogger

Styling buttons is something that designers do every day. Box shadows and gradients have been used over and over again when styling buttons. So Today I am going to make a sliding button for Blogger. Let's Begin

LIVE DEMO

Hello, World

How to ADD it

1. Go to template>Edit HTML
2. Click anywhere and press CTRL+P
3. Search for ]]></b:skin>
4. Paste the following code above it

.button_sliding_bg {    color: #FFF;    background: #EF672F;    padding: 15px 20px;    margin: 25px;    font-family: 'OpenSansBold', sans-serif;    font-size: 14px;    font-weight: bold;    letter-spacing: 1px;    text-transform: uppercase;    border-radius: 2px;    display: inline-block;    text-align: center;    cursor: pointer;    box-shadow: inset 0 0 0 0 #C14800; -webkit-transition: all ease 0.8s; -moz-transition: all ease 0.8s; transition: all ease 0.8s;}.button_sliding_bg:hover {    box-shadow: inset 0 100px 0 0 #C14800;}

1. Create a new post and go to HTML tab
2. Paste the following code

<div class="button_sliding_bg">YOUR TEXT HERE</div> 

THAT'S ALL :) 

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest