How To Add Best Buttons with Beautiful Hover Effect with only CSS for Blogger

Colorful Heart Effect

Let's Begin

Step #1:  Login to your Blogger Dashboard

Step #2: Click on theme section.

Step #3: After that edit HTML.

Step #4: Type Ctrl+F on the keyboard and search for ]]<b:skin> tag.

Step #5: After that copy the below CSS code and paste it before ]]<b:skin> tag.

<style>
  .abdullahdcurz{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    background: none;
  }

  .btn {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 2px solid #e74c3c;
    border-radius: 0.6em;
    color: #e74c3c;
    cursor: pointer;
    display: flex;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: 20px;
    padding: 1.2em 2.8em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
  }

  .btn:hover,
  .btn:focus {
    color: #fff;
    outline: 0;
  }

  .first {
    transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
  }

  .first:hover {
    box-shadow: 0 0 40px 40px #e74c3c inset;
  }

  .second {
    border-radius: 3em;
    border-color: #1abc9c;
    color: #fff;
  }

  .second:hover {
    background-position: 100px;
  }

  .third {
    border-color: #3498db;
    color: #fff;
    box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
    transition: all 150ms ease-in-out;
  }

  .third:hover {
    box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
  }

  .fourth {
    border-color: #f1c40f;
    color: #fff;
    background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    transition: background 300ms ease-in-out;
  }

  .fourth:hover {
    background-position: 0;
  }

  .fifth {
    border-color: #8e44ad;
    border-radius: 0;
    color: #8e44ad;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 150ms ease-in-out;
  }

  .fifth:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 100%;
    background: #8e44ad;
    z-index: -1;
    transition: width 150ms ease-in-out;
  }

  .fifth:hover {
    color: #fff;
  }

  .fifth:hover:after {
    width: 110%;
  }

  .sixth {
    border-radius: 3em;
    border-color: #2ecc71;
    color: #2ecc71;
    background-image: linear-gradient(top, transparent 50%, #2ecc71 50%);
    background-position: 0% 0%;
    background-size: 210%;
    transition: background 150ms ease-in-out, color 150ms ease-in-out;
  }

  .sixth:hover {
    color: #fff;
    background-position: 0 100%;
  }
</style>

Step #6: Now click on save theme. 

Below are the demo with codes for using the button. Copy the code from below buttons when you want to use any button on your blog.

<div class="abdullahdcurz">
  <button class="btn first">Button 1</button>
</div>

<div class="abdullahdcurz">
  <button class="btn second">Button 2</button>
</div>

<div class="abdullahdcurz">
  <button class="btn third">Button 3</button>
</div>

<div class="abdullahdcurz">
  <button class="btn fourth">Button 4</button>
</div>

<div class="abdullahdcurz">
  <button class="btn fifth">Button 5</button>
</div>

<div class="abdullahdcurz">
  <button class="btn sixth">Button 6</button>
</div>

I hope you were able to successfully add the  Buttons with Beautiful Hover Effect to your Blogger blog after completing the preceding steps. Please contact us if you experience any kind of issue.

Before starting always backup your template for any kind of error and easy restoration.

Copyright:
www.abdullahdcurz.blogspot.com

Go to Link

Go to Link