purple-btn-large.html

<a href="https://github.com/teaxyz/cli">
    <button class="purple-btn-large"><i class="icon-enter-arrow"></i>VISIT GITHUB</button>
</a>

<style>

  /* Detail Button - Large */

  @media only screen and (min-width: 1200px) {

    .purple-btn-large{
      font-family: "pp-neue-machina", sans-serif;
      font-size: 16px;
      background-color: #8000ff;
      border: none;
      color: #fff;
      padding-top: 0.279vw;
      text-decoration: none;
      text-transform: uppercase;
      width: 20.925vw;
      height: 4.185vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover{
      background-color: #8000ff;
      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
    }

     /* Icon Styling */

    .purple-btn-large .icon-enter-arrow{
      display: inline-block;
      position: relative;
      margin-right: 0.558vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover .icon-enter-arrow{
      display: inline-block;
      transform: rotate(-45deg) !important;
    }

  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {

    .purple-btn-large{
      font-family: "pp-neue-machina", sans-serif;
      font-size: 16px;
      background-color: #8000ff;
      border: none;
      color: #fff;
      padding-top: 0.279vw;
      text-decoration: none;
      text-transform: uppercase;
      width: 30vw;
      height: 5vw;
      transition: 0.2s ease-in-out;
      margin-bottom: 1vw;
    }

    .purple-btn-large:hover{
      background-color: #8000ff;
      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
    }

     /* Icon Styling */

    .purple-btn-large .icon-enter-arrow{
      display: inline-block;
      position: relative;
      margin-right: 0.558vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover .icon-enter-arrow{
      display: inline-block;
      transform: rotate(-45deg) !important;
    }

  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {

    .purple-btn-large{
      font-family: "pp-neue-machina", sans-serif;
      font-size: 14px;
      background-color: #8000ff;
      border: none;
      color: #fff;
      padding-top: 0.279vw;
      text-decoration: none;
      text-transform: uppercase;
      width: 30vw;
      height: 5.141vw;
      margin-bottom: 1vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover{
      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
    }

     /* Icon Styling */

    .purple-btn-large .icon-enter-arrow{
      display: inline-block;
      position: relative;
      margin-right: 0.558vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover .icon-enter-arrow{
      display: inline-block;
      transform: rotate(-45deg) !important;
    }

  }

  @media only screen and (min-width: 576px) and (max-width: 768px) {

    .purple-btn-large{
      font-family: "pp-neue-machina", sans-serif;
      font-size: 14px;
      background-color: #8000ff;
      border: none;
      color: #fff;
      padding-top: 0.279vw;
      text-decoration: none;
      text-transform: uppercase;
      width: 33.85vw;
      height: 6.77vw;
      margin-bottom: 2.5vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover{
      background-color: #8000ff;
      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
    }

     /* Icon Styling */

    .purple-btn-large .icon-enter-arrow{
      display: inline-block;
      position: relative;
      margin-right: 0.558vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover .icon-enter-arrow{
      display: inline-block;
      transform: rotate(-45deg) !important;
    }

  }

  @media only screen and (max-width: 576px) {

    .purple-btn-large{
      display:inline-block;
      font-family: "pp-neue-machina", sans-serif;
      font-size: 3vw;
      background-color: #8000ff;
      border: none;
      color: #fff;
      padding-top: 0.279vw;
      text-decoration: none;
      text-transform: uppercase;
      width: 100%;
      height: 14vw;
      margin-top: 5vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover{
      background-color: #8000ff;
      box-shadow: inset 0vw 0vw 0vw 1.25vw #1a1a1a !important;
    }

     /* Icon Styling */

    .purple-btn-large .icon-enter-arrow{
      display: inline-block;
      position: relative;
      margin-right: 2vw;
      transition: 0.2s ease-in-out;
    }

    .purple-btn-large:hover .icon-enter-arrow{
      display: inline-block;
      transform: rotate(-45deg) !important;
    }

  }

</style>