HTML And CSS Button Generator 2020

HTML Button Generator For WordPress

You can generate the HTML and CSS button with the help of this HTML button generator for free. You need to do some setting and your button is ready for your WordPress or blogger website. This is a professional online code generator and contain all kinds of CSS for button and also contain prefix code.

HTML Button Generator For Blogger

Yes, You can also generate your button for Blogger Website.

Main Customize

Button Text:
Button Link: 
Select Icon:   Please select icon Download Warning Save Tag File Zip File Language facebook Instagram Whatsapp Twitter Youtube Share Share Alt Mail Reply Mail Copyright Bell Comment Bullhorn Camera Cloud Download Thumb Like Home none
Text Style:    Uppercase Lowercase none
Select Text Color:
Background Color:

Advanced Customize

Padding Top: Padding Right:

Padding Bottom: Padding Left:

Button Width: Button Height:

Select Border Color: Border Width:

Border Radius: Box Shadow Color:

Verticle Shadow: Horizontal Shadow:

Shadow Blur:

Hover Effects

Hover Background color: Hover Background color:
Hover Border color:

Code

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div style="text-align: center;"><a href="#"><button id="btn12"> <i class="fa fa-download" id="iconstyle"> </i>  Example Button</button></a></div> 
<style> 
#btn12:hover {background-color:  ;color: ; border-color: ;
    opacity:  0.75 ;}
    #btn12 {
    display: inline-block;
    background-color: #f33f3f;
    border: none;
    color: #fff;
    font-weight: 700;
    padding:  10px  15px  10px  15px  ;
    text-transform: uppercase;
    -webkit-border-radius:  5px;
    -moz-border-radius:  5px;
    -ms-border-radius:  5px;
    -o-border-radius:  5px;
    border-radius:  5px;
    -webkit-transition: all  0.3s;
    -moz-transition: all  0.3s;
    -ms-transition: all  0.3s;
    -o-transition: all  0.3s;
    transition: all  0.3s;
    width:   px;
    height:   px;
    border:solid 1px  #f33f3;
    box-shadow: 1px 1px 1px #f33f3f;
   
    } 
    </style>