How To Add Responsive Demo and Download Button On Blog. - WebDuniya

Monday, December 10, 2018

How To Add Responsive Demo and Download Button On Blog.

 Add Responsive  Demo and Download Button On Blog.


Hello Friends How Are You All ? Hope You Are Well & Enjoy Our Articles... Today We Share a Simple Helpful Tutorial For Add Simple Stylish Demo & Download Button On Our Blogger. Hope You Are Visiting Regularly Many Blogs , Then Ofcourse You Are Seen a Stylish Demo & Download Button on There . Yes ! But That Is Not a Simple Button Images ; That Is Widget Which Are Made With Simple CSS & HTML Code. So In This  Post We Shown You How To Add Them. 



Add Responsive  Demo and Download Button
Add Responsive  Demo and Download Button

Let's Follow Below Step...πŸ‘‡

How To Add Responsive  Demo and Download Button πŸ‘„




πŸ’§ First Log in to Blogger Account

πŸ’§Select Dashboard> Template> Edit HTML

πŸ’§Next Press CTRL + F for Find ]]> </ b: skin>

πŸ’§Then add the following CSS Code On above]]> </ b: skin>


/* Demo and Download Button For Blog ---------------*/ .rbutton{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#08A1F3!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .rbutton:hover{background-color:#09BB5F!important;background:0} .buttonx:active{position:relative;top:1px}



πŸ’§Finally Click To Save Template.


πŸ’¦ Next To The Last Step You Need To Be The HTML  Added In HTML Tab Instead Of COMPOSE Mode With Your Proper Links.


 <div style="text-align: center;margin: 10px 0;"> <a class="rbutton" href="your link" target="_blank">Demo</a> <a class="rbutton" href="your link" target="_blank">Download</a> </div>



Advantages Of This Button & It's Code. πŸ‘€


πŸ’™This Button Will Look Proffessional 

πŸ’šHelp To Your Visitors Find Proper Links

πŸ’–Beautiful Design Attract Your Readers.

πŸ’ŸSimple Coded With Optimized CSS & HTML Code.

πŸ’œDoesn't Effect On Blog Page Loading.

πŸ’—It's Fully Responsive With Properly Made With SEO Terms.

πŸ’”No Hidden Code Or Link.



Please Note : πŸ”–



Change the address the your link with the URL / web address which you want to use .



That's It ; Have A Nice Journey Of Your Blog..πŸ’‹

Conclusion :

Thank you for reading our article ; if you find this article helpful then please , please share this post , any asking or help you can comment below.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner