underlined button 2

index.html

<div class="container">
  <button class="btn btn-underline">
    <span>underlined button</span>
    <i class="motion-container" aria-hidden="true"></i>
  </button>
</div>

style.sass

/* choose color number (1-9) */

$choose-color: 1
$colors: #56e, orange, red, pink, blue, lightgreen, violet, black, grey, purple

$font-family: "Varela Round"


$line-bottom-margin: .63em
$btn-background: nth($colors, $choose-color)
$text-color: lighten($btn-background, 53%)

@import url('https://fonts.googleapis.com/css?family=Varela+Round')

html,
body
  height: 100%

.container
  display: flex
  align-items: center
  justify-content: center
  height: 100%
  font-size: 1.5em
  background: lighten($btn-background, 45%)

.btn
  padding: 1em 2em 1.5em
  border: none
  border-radius: .5em
  font-family: $font-family

  &-underline
    background-color: $btn-background
    color: $text-color
    text-shadow: 0 0 5px darken($btn-background, 35%)
    box-shadow: 0 0 25px transparentize($btn-background, .7)
    position: relative
    border: solid .3em lighten($btn-background, 51%)
    transition: .15s ease-in-out
    
    &:hover
      background-color: lighten($btn-background, 2%)
    
    &:focus
      outline: none
      background-color: desaturate(darken($btn-background, 15%), 35%)
    
    &:active
      outline: none
      box-shadow: 0 0 5px transparentize($btn-background, .7)
      background-color: desaturate(darken($btn-background, 35%), 35%)
      border-width: .25em
    
      .motion-container
        &::before,
        &::after
          width: 10px
          bottom: .35em

        &::before
          transform: rotateZ(45deg)
          margin-left: 1px
          left: calc(50% - 12px)

        &::after
          transform: rotateZ(-45deg)
          margin-right: 1px

    .motion-container
      position: absolute
      bottom: .25em
      width: 100%
      left: 0
      height: #{ $line-bottom-margin + .3 }
      overflow: hidden
      
      &::before,
      &::after
        content: ' '
        position: absolute
        width: calc(50% - 2em)
        height: 0px
        border-bottom: solid 3px darken($text-color, 15%)
        bottom: $line-bottom-margin
        transition: all .3s
        box-sizing: border-box
        border-radius: 3px

      &::before
        margin-left: 2px
        left: 2em
        transform-origin: 100% 100%

      &::after
        margin-right: 2px
        left: 50%
        transform-origin: 0% 100%
    

underlined-button-2.markdown

underlined button 2

Customizable buttons with detailed motion, written with sass + html. Select your favorite color theme by choosing number from 1 to 10 in $choose-color variable.

A Pen by Jan Mirecki on CodePen.

License.