CSS Animated Underline

A.CSS Animated Underline.md

CSS Animated Underline

AnimatedButton.scss

 .bt-wrapper{
    position: relative;
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center;

    &:hover {
      cursor: pointer;
    }

    &:hover > a::after {
      width: 70%;
      left: 15%;
      transition: 0.5s ease all;
    }

    > a {
      font-size: 8px;
      font-weight: 600;
      line-height: 14px;
      letter-spacing: 1.33px;
      color: rgba(0, 0, 0, 0.5);

      &:hover {
        text-decoration: none;
      }

      &:after {
        content: "";
        position: absolute;
        top: 100%;
        height: 1px !important;
        width: 30%;
        left: 35%;
        background-color: #D8D8D8;
        transition: 0.4s ease-out all .1s;
      }
    }