Breaking News: Grepper is joining You.com. Read the official announcement!

simple button css codepen

SECRET MYSTERY answered on May 6, 2022 Popularity 10/10 Helpfulness 1/10

answer simple button css codepen

simple button css codepen

Comment

$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>

Popularity 10/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: button codepen css

Link to this answer
Share Copy Link

Contributed on May 06 2022

SECRET MYSTERY

0 Answers Avg Quality 2/10

simple button css codepen

Contents

More Related Answers

simple button css codepen

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.