“Bouton simple CSS Codepen” Réponses codées

Bouton simple CSS Codepen

$yellow: #fff000
$blue: #007bff
$white: #fff
$black: #000

body
  margin: 0

section
  position: relative
  background: $black
  height: 100vh
  display: flex
  align-items: center

  .btn-link
    display: inline-block
    position: relative
    padding:  15px 20px
    background: $yellow
    color: #000
    font-size: 18px
    text-align: center
    text-decoration: none
    font-weight: 700
    margin: 0 auto 20px
    border-radius: 25px
    transition: all 0.25s ease-in
    z-index: 1
    &:after
      content: ''
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0px
      background: $yellow
      z-index: -1
      border-radius: 25px
      transition: all 0.25s ease-in
    &:hover
      color: #fff
      background: $blue 
      text-decoration: none 
      &:after
        bottom: -5px
        background: $blue
        opacity: 0.75
    &:active
      color: #fff
      text-decoration: none
      background: $blue
      transform: translateY(5px)
      &:after
        bottom: 0px

<section>
  <a class="btn-link">hover and click here</a>
</section>