Add colorful and animated CSS buttons for Blogger

In this blog article we will show you how to code colorful and animated buttons when Put more contractors on top. The reason we have to code this button manually is because when we change any template, we just put this code into templat. Buttons in the text that we put before will be back. But if we use a shortcode that the template already has, we will be dizzy when we stop using the template n: because of the button label, we do not know How-to code.

How to apply: Go to the template and find the code tag]]> </ b: skin>

Copy the code below and paste it into the Save template

Code to put in the template above the label]]> </ b: skin>

/*=================
Button CSS
===================*/

.buttons {
    margin: 0%;
    text-align: center;
}

.btn-hover {   
    padding: 0px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    margin: 10px;
    height: 45px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;}

.btn-hover:focus {
    outline: none;}

.btn-hover.color-1 {
    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);
    box-shadow: 0 4px 10px 0 rgba(49, 196, 190, 0.75);
}

.btn-hover.color-2 {
    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
    box-shadow: 0 4px 10px 0 rgba(229, 66, 10, 0.75);
}

.btn-hover.color-3 {
    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
    box-shadow: 0 4px 10px 0 rgba(116, 79, 168, 0.75);
}

.btn-hover.color-4 {
    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);
    box-shadow: 0 4px 10px 0 rgba(252, 104, 110, 0.75);
}

.btn-hover.color-5 {
    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);
    box-shadow: 0 4px 10px 0 rgba(23, 168, 108, 0.75);
}

.btn-hover.color-6 {
    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
    box-shadow: 0 4px 10px 0 rgba(83, 176, 57, 0.75);
}

.btn-hover.color-7 {
    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
    box-shadow: 0 4px 10px 0 rgba(126, 52, 161, 0.75);
}

.btn-hover.color-8 {
    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
    box-shadow: 0 4px 10px 0 rgba(45, 54, 65, 0.75);
}

.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 10px 0 rgba(65, 132, 234, 0.75);
}

.btn-hover.color-10 {
    background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a, #FBB03B);
    box-shadow: 0 4px 10px 0 rgba(236, 116, 149, 0.75);
}

.btn-hover.color-11 {
    background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);
    box-shadow: 0 5px 10px rgba(242, 97, 103, .4);
}

- Go to create an article post or page
- Click on the HTML section, copy the code below to download and try the results
- Code to put in the text, depending on the HMTL section

For consecutive out buttons

<button class="btn-hover color-1" onclick="window.open('#')">Button</button>

For the button in the middle

<div class="buttons"> <button class="btn-hover color-1" onclick="window.open('#')">Button</button></div>

For consecutive buttons (Font Aewsome)

<button class="btn-hover color-1" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>

Button in the middle (Font Aewsome)

<div class="buttons"> <button class="btn-hover color-1" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button></div>

Colors from 1 to 11 (no Font Aewsome)

  <button class="btn-hover color-1" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-1" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-2" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-3" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-4" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-5" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-6" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-7" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-8" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-9" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-10" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-11" onclick="window.open('#')">Button</button>

<div class="buttons">
  <button class="btn-hover color-1" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-2" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-3" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-4" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-5" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-6" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-7" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-8" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-9" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-10" onclick="window.open('#')">Button</button>
  <button class="btn-hover color-11" onclick="window.open('#')">Button</button>
</div>

Colors from 1 to 11 (Font Aewsome)

  <button class="btn-hover color-1" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-1" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-2" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-3" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-4" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-5" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-6" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-7" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-8" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-9" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-10" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-11" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>

<div class="buttons">
  <button class="btn-hover color-1" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-2" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-3" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-4" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-5" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-6" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-7" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-8" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-9" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-10" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
  <button class="btn-hover color-11" onclick="window.open('#')"><i class="fa fa-download"></i>  Button</button>
</div>

Note: If your blog does not have Font Awesome yet, please install it.