Free Buttons HTML and CSS styles

<a href="javascript:void(0)" class="amberecho">
  Discover now
</a>

<style>
  :root {
    --link-color: #231e15;
    --copy-info-size: .8125rem;
    --link-color-hovered: #231e15;
  }

  .amberecho, .amberecho:hover {
    text-decoration: none;
  }

  .amberecho {
    border-radius: 2em;
    transition: color .15s ease-in-out, transform .3s;
    --shift-distance: calc(4*.0625rem);
    color: var(--link-color);
    display: inline-block;
    line-height: 2rem;
    padding-right: 2.5rem;
    position: relative;
    transform: translate(0);
    transition-behavior: normal, normal;
    z-index: 1;
  }

  .amberecho::before {
    background-color: #ffe01b;
    background-image: url(https://mailchimp.com/release/plums/d587a00f04ec1dd3.svg);
    background-position: calc(100% - .4375rem) calc(100% - .4375rem);
    background-repeat: no-repeat;
    background-size: 1.125rem;
    border-radius: 1rem;
    bottom: 0;
    content: "";
    display: block;
    height: 2rem;
    left: calc(100% - 2rem);
    position: absolute;
    right: 0;
    transition: left .3s cubic-bezier(.34, 1.2, .64, 1), right .3s, background-position .3s;
    transition-behavior: normal, normal, normal;
    z-index: -1;
  }

  .amberecho:hover {
    color: var(--link-color-hovered);
    transform: translateX(var(--shift-distance));
  }

  .amberecho:focus-visible::before {
    color: var(--link-color-hovered);
    transform: translateX(var(--shift-distance));
  }

  .amberecho:hover::before {
    animation: fakebounce .3s ease-in-out;
    transition: right .3s, background-position .3s;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    background-position-x: calc(100% - (var(--shift-distance)*3.5));
    height: 100%;
    left: -1rem;
    transition-behavior: normal, normal;
  }

  .amberecho:focus-visible::before {
    animation: fakebounce .3s ease-in-out;
    height: 100%;
    transition: right .3s, background-position .3s;
    transition-behavior: normal, normal;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
    left: -1rem;
  }

  .amberecho:active::before {
    background-position-x: calc(100% - .4375rem);
    right: 0;
  }

  .amberecho:focus-visible::before {
    background-position-x: calc(100% - .4375rem);
    right: 0;
  }

  .amberecho:focus-visible {
    outline: 0;
  }

  .amberecho:focus-visible::after {
    border-radius: 1rem;
    bottom: 0;
    content: "";
    left: -.75rem;
    outline: .125rem solid #4bc4c2;
    outline-offset: calc(.15625rem);
    position: absolute;
    right: -.25rem;
    top: 0;
  }

  @media (prefers-reduced-motion) {

    .amberecho, .amberecho:hover {
      transition-behavior: normal, normal, normal;
    }

    .amberecho {
      transition: background .4s, padding-left 0s .4s, transform 0s .4s;
      --shift-distance: 0em;
      background-color: transparent;
    }

    .amberecho:hover {
      background-color: #ffe01b;
      padding-left: 1.125rem;
      transform: translate(-1.125rem);
      transition: background .4s, padding-left 0s, transform 0s;
    }

    .amberecho:hover::before {
      background-position: calc(100% - .4375rem) calc(100% - .4375rem);
      left: calc(100% - 2rem);
    }
  }

  @media (prefers-reduced-motion) and (prefers-reduced-motion) {
    .amberecho:hover::before {
      animation: none auto;
      animation-timeline: auto;
      animation-range-start: normal;
      animation-range-end: normal;
    }
  }

  .amberecho {
    font-size: var(--copy-info-size);
    font-weight: 500;
  }
</style>
Amber Echo

Characteristics:
