Free Buttons HTML and CSS styles

<a href="javascript:void(0)" class="peekinside">
  <span class="peekinside-text">Learn more about us</span>
  <span aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M9.54707 7.99991L5.35181 12.1952L6.47139 13.3148L11.7862 7.99991L6.47139 2.68506L5.35181 3.80464L9.54707 7.99991Z"></path>
    </svg>
  </span>
</a>

<style>

  .peekinside .peekinside-text {
    position: relative;
    font-family: Helvetica, Arial, sans-serif;
    cursor: default;
    text-decoration: none;
  }

  .peekinside .peekinside-text::after {
    background-color: #4c00ff;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    transition: width 300ms ease-in-out;
    transition-behavior: normal;
    width: 0;
  }

  .peekinside {
    border-radius: .25rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    outline-offset: 2px;
    width: fit-content;
    -webkit-font-smoothing: antialiased;
  }

  .peekinside, .peekinside span {
    -webkit-box-align: center;
    align-items: center;
    display: inline-flex;
  }

  .peekinside, .peekinside:active, .peekinside:hover {
    text-decoration: none;
  }

  .peekinside:active .peekinside-text::after, .peekinside:hover .peekinside-text::after {
    width: 100%;
  }

  .peekinside:active .peekinside-text::after {
    background-color: #130032;
  }

  .peekinside svg {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
  }

  .peekinside, .peekinside:hover, .peekinside:visited {
    color: #4c00ff;
  }

  .peekinside:active {
    color: #130032;
  }
</style>
Peek Inside

Characteristics:
