Button hover effect – Bootstrap4

Button hover effect – Bootstrap4

HTML

<div class="contents bg-primary overflow-hidden">
  <div class="container d-flex justify-content-center align-items-center h-100">
    <div class="section8 w-100">
      <h3 class="display-5 text-center Mreflect mb-5 text-light">[S8]Button hover effect - Bootstrap4</h3>

      <div class="jumbotron bg-primary text-light rounded-lg">
        <h1 class="display-4 font-weight-bolder Mglow">Lorem <span class="font-weight-light text-success Mblink">ipsum</span></h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4 border">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>


        <a class="btn border text-light" href="#" role="button">
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-circle Mbtn" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path class="Mblink" fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
            <path fill-rule="evenodd" d="M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z"/>
          </svg>
          <span>more 1</span>
        </a>

        <button class="btn border text-light">
          <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-circle Mbtn" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
            <path class="Mblink" fill-rule="evenodd" d="M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z"/>
          </svg>
          <span>more 2</span>
        </button>


        <div class="mb-5"></div>

        <div class="media">
          <svg height="80px" viewBox="0 0 80 80">
            <circle fill="#fff" cx="6" cy="50" r="6">
              <animate 
              attributeName = "opacity"
              values="0;1;0"
              dur="1s"
              repeatCount="indefinite"
              begin="0.1"
            />
            <animate 
            attributeName = "cy"
            values="50;60;50"
            dur="1s"
            repeatCount="indefinite"
            begin="0.1"
           />
            </circle>
            <circle fill="#fff" cx="26" cy="50" r="6">
              <animate 
              attributeName = "opacity"
              values="0;1;0"
              dur="1s"
              repeatCount="indefinite"
              begin="0.2"
            />
            <animate 
            attributeName = "cy"
            values="50;60;50"
            dur="1s"
            repeatCount="indefinite"
            begin="0.2"
            />
            </circle>
            <circle fill="#fff" cx="46" cy="50" r="6">
            <animate 
            attributeName = "opacity"
            values="0;1;0"
            dur="1s"
            repeatCount="indefinite"
            begin="0.3"
           />
            <animate 
            attributeName = "cy"
            values="50;60;50"
            dur="1s"
            repeatCount="indefinite"
            begin="0.3"
           />
            </circle>
          </svg>
          <div class="media-body pl-3">
            <h2 class="mt-0">Media heading</h2>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </div>




      </div>



    </div>
  </div>
</div>

SCSS

.section8{
    .btn{
        padding: 0.375rem 2.5rem;
        color: $white;
        position: relative;
        overflow: hidden;
        span{
            transition: .5s ease-in-out;
        }

        .Mbtn{
            position: absolute;
            left: 24px;
            top: -12px;
            color: $color-1;
            transition: .5s ease-in-out;
            opacity: 0;
        }

        &:hover{
            span{
                display: table;
                position: relative;
                z-index: 300;
                transform: translateX(10px);
                color: $color-1;

            }

            .Mbtn{
                position: absolute;
                top: 12px;
                z-index: 301;
                opacity: 1;
            }

            &::after{
                width: 100%;
            }

        }

        &::after{
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: $white;
            transition: .3s;
        }
    }
}

.Mglow{
    animation: Mglow 2s ease-in-out infinite;
}

@keyframes Mglow{
    40%{
        text-shadow: 0 0 15px $color-3;
    }
}

.Mblink{
    animation: Mblink 2s ease-in-out infinite;
}

@keyframes Mblink{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

Bootstrap4 theming ep01

Bootstrap4 theming ep02