Create CSS buttons in blogger for blog in two steps!

When you’ve been blogging for a while, you may come to a point and you need a CSS button for your blog. If on your blogger blog you want to display colorful and cool buttons with links you can put the CSS codes to your blog. It is simple to do just you can copy the code that past is to your blog post or any where you want to put the CSS code. In two steps you can do that. This is the CSS button with mouse hover effect that means when someone come to click the CSS button the color changes text color change it look great on the blogger BlogSpot.

LIVE DEMO !!

Read More

STEP - 1   GO to BLOGGER > TEMPLATE > EDIT HTML then find  </b:skin>




STEP - 2   Now copy the code and past just above the  </b:skin>

.button.button-border:hover {
background-color:#444;
color: #FFF;
border-color: transparent !important;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.button.button-border.button-small {
line-height: 30px;
}
body:not(.device-touch) .button {
transition: all .2s ease-in-out;
}
.button.button-small {
padding: 8px 18px;
font-size: 22px;
height: 32px;
font-family: Oswald, sans-serif;
text-decoration: none;
margin-bottom:5px;
float:right;
}
.button.button-border {
border: 2px solid #444;
background-color: transparent;
color: #333;
text-shadow: none;
}
.button {
display: inline-block;
position: relative;
cursor: pointer;
outline: none;
white-space: nowrap;
margin: 5px;
}
.button.button-rounded {
border-radius: 3px;
}

After you past it to Blogger TEMPLATE SAVE it. If You want to change the color of :hover you can change it by change the code of color marked in red.
STEP - 2  copy the code given bellow and pate it where ever you want to show the CSS Button in your blog.

 <p><a class="button button-small button-border button-rounded" href="#">Read More</a></p>

Now you are all done hope this work in your blog. This is the cool CSS button for your blog.