Web buttons are designed to place in your blog post page or anywhere you would like to add by using the CSS code and HTML code to place in your created post, it will be supplied to your need on your action. The web button can change size and color and any customization. This below tutorial will give you a tip how to add web button on your blogger or Wordpress post wich powered by CSS codes.
How to add web button on blogger post
Step 1: Got to blogger.con and log in your blog
Step 2: Go to "Template" Edit HTML
Step3: Click anywhereHTMLcode area and then press Ctrl + F or Command + F for Mac to search for the below code and copy it and then paste it in the search column and press enter key.
]]></b:skin>Step 4: Just above it paste this below CSS code and click "Save Template" button
/*—Live Demo------------------------------ */
a.live-demo {
background: #1b7a65;
background-image: -webkit-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -moz-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -ms-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -o-linear-gradient(top, #1b7a65, #0cb28d);
background-image: linear-gradient(to bottom, #1b7a65, #0cb28d);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
box-shadow:0 0px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset !important;
color: #fff;
text-shadow: 1px 2px 1px #fafafa;
font-size: 14px;
font-weight: bold;;
padding: 10px 20px 10px 20px;
}
a.live-demo:hover {
color: #fff;
background: #3e3f3f;
text-decoration: none;
}
Step 5: Use this below HTML code to place anywhere you want to show this button.
<div style="text-align: center;">
<a class="live-demo" href="Add URL Here" rel="nofollow" target="_blank">Live Demo <i class="fa fa-chevron-circle-right"></i></a></div>
How to add web button on Wordpress Post
Step 1: Go to Wordpress and login you Wordpress website
Step 2: On the dashboard just to appearance and click in "Editor"
Step 3: Copy below CSS Code and paste in CSS code area then click in "Update Fil" button
/*—Live Demo------------------------------ */
a.live-demo {
background: #1b7a65;
background-image: -webkit-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -moz-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -ms-linear-gradient(top, #1b7a65, #0cb28d);
background-image: -o-linear-gradient(top, #1b7a65, #0cb28d);
background-image: linear-gradient(to bottom, #1b7a65, #0cb28d);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
box-shadow:0 0px 2px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset !important;
color: #fff;
text-shadow: 1px 2px 1px #fafafa;
font-size: 14px;
font-weight: bold;;
padding: 10px 20px 10px 20px;
}
a.live-demo:hover {
color: #fff;
background: #3e3f3f;
text-decoration: none;
}
Step 4: Use this below HTML code to place anywhere you want to show this button.
<div style="text-align: center;">
<a class="live-demo" href="Add URL Here" rel="nofollow" target="_blank">Live Demo <i class="fa fa-chevron-circle-right"></i></a></div>
You can replace your personal web URL and you need to direct to nay page when someone your visitors click on it by replace on "Add URL Here" ToRename button title that shows in the button by Replace on "Live Demo". To change the button color just replace your personal color on #1b7a65.
