Adding a stylish and animated html button in blogger or wordpress blog posts

Adding a stylish html button to your blogger or wordpress blog post.

Let's see how you can use a stylish html button in your blogger or wordpress blog post. Adding a button will increase layout performance of your blog posts. You can use buttons in blogger or wordpress templates too. Use it to add extra functionality in your blog themes. It attracts the users and make users to click on it.

What is a html <button>.

A html button <button> element is a clickable button that is used to submit forms, using as a text for hyperlinks, call functions and etc.
Html button css animated button

Creating a html button.

We use html <button> element to define a button. They can be applied extra styles by using css (Cascading Style Sheets). We can animate buttons with css easily. Lets learn how you can do this.

Html and Css, Stylish button 1

<style> #stylish-button1 {width:120px; padding:4px; height:40px; border-radius:12px; background-color: green; border:1px #242424 solid; cursor: pointer; color:white; outline: none; box-shadow: 0 8px 8px 0px silver; } #stylish-button1:hover{background-color:#6698ff; color:white;} #stylish-button1:active { &#160;background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> <button id="stylish-button1"> </button>

Output / Result

Html and Css, Stylish button 2

<style> #stylish-button2 { width:120px; height:30px; padding:4px; color:#6698ff; background-color: #282828; border:1px black solid; transition: all 0.5s; } #stylish-button2:hover{background-color: green; outline:0; margin-top:4px; border:1px black solid; box-shadow:0px 4px 4px 0px silver; border-radius:8px;} #stylish-button2 span { cursor: pointer; transition: 0.5s; } #stykish-button2 span: after { opacity:0; transition:0.5s; } #stylish-button2:hover span { padding-right:30px; color: white; } #stylish-button2:hover span:after { opacity:0; right:0; } </style> <button id="stylish-button2"> </button>

Output / Result

How to use custom html button in blog posts.

Copy the above given code for each button and paste in the blog post section using custom html post editor where you want these animated or stylish buttons appear.