How To Create Demo Button Using HTML & CSS

Demo Button Using HTML and CSS
Source Minning Tech


Demo Button is the most important button for those blogger who share any Templates, page, Scripts, image and many more. So in this article we will make a demo button by using HTML and provide a very beautiful style using CSS.


We will create this Awesome Demo button by using our Code editor Software, and when you use this code on your Blogger template it may have some position problem and this issue will face mostly some theme.

If You face like this position problem then don't worry just set the height, width and padding according to yours. Otherwise you can comment your problem and we will try to fix it, if you face like this.

Source Code

<script src="" crossorigin="anonymous"></script>

<style type="text/css" media="all">

.minning-btn {

background: #58b465;

height: 18px;

padding: 5px;

width: 70px;

border: solid #58b465 2px;

border-radius: 10px;

font-family: Monospace;

text-align: center;


.minning-btn a {

color: black;


.minning-btn:hover {

box-shadow: silver 2px 0px 10px 4px;

background: #f2f2f2;



<div class="minning-btn">

<a href="" target="_blank"><i class="far fa-eye">Demo</i></a>


Just Copy the code and You can apply any page. It works on both Blogger and WordPress, But WordPress have too many plugin to create awesome button. So it mainly use in blogger because there are no plugin in blogger.

Here is the YouTube Video of our Channel if you face any problem then you can follow the video to create Button.

For more CSS Tutorials or Blogging Tutorials must Visit our Blog and Subscribe our Minning Tech YouTube Channel. If you face any problem then you can follow our Instagram and message us about your issue.