<h1> Button effects </h1>

<div class="container">
  <button class="button type1">
    Effect one
  </button>

  <button class="button type2">
    Effect two
  </button>
  
  <button class="button type3">
    Effect three
  </button>
  
  <button class="button type4">
    Effect Four
  </button>
</div>

<p class="copyright"> By <a href="http://emanuelgsouza.dev">EmanuelG</a> </p>
// Variables
$color: black
$body-color: #ecf0f1
$color1: #566473
$color2: #16a085
$color3: #435a6b
$color4: red

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

// General configs
* 
  box-sizing: border-box

body
  margin: 0
  padding: 0
  width: 100%
  height: 100vh
  display: flex
  justify-content: center
  align-items: center
  flex-direction: column
  font-family: Raleway
  background-color: $body-color

.copyright
  position: absolute
  bottom: 0
  
  a
    text-decoration: none
    color: $color2
    
    &:hover
      text-decoration: underline
  
  
// Button component
.button
  position: relative
  padding: 1em 1.5em
  border: none
  background-color: transparent
  cursor: pointer
  outline: none
  font-size: 18px
  margin: 1em 0.8em
  
  &.type1
    color: $color1
    // Effect one
    &.type1::after,
    &.type1::before
      content: ''
      display: block
      position: absolute
      width: 20%
      height: 20%
      border: 2px solid
      transition: all 0.6s ease
      border-radius: 2px

    &.type1::after
      bottom: 0
      right: 0
      border-top-color: transparent
      border-left-color: transparent
      border-bottom-color: $color1
      border-right-color: $color1

    &.type1::before
      top: 0
      left: 0
      border-bottom-color: transparent
      border-right-color: transparent
      border-top-color: $color1
      border-left-color: $color1

    &.type1:hover:after,
    &.type1:hover:before
      width: 100%
      height: 100%
   
  &.type2
    color: $color2
    // Effect 2
    // Inspiration https://tympanus.net/Development/CreativeLinkEffects/
    &.type2:after,
    &.type2:before
      content: ''
      display: block
      position: absolute
      top: 100%
      left: 0
      width: 100%
      height: 2px
      background-color: $color2
      transition: all 0.3s ease
      transform: scale(0.85)

    &.type2:hover:before
      top: 0
      transform: scale(1)

    &.type2:hover:after
      transform: scale(1)
  
  &.type3
    color: $color3
    
    //Effect three
    // Effect one
    &.type3::after,
    &.type3::before
      content: ''
      display: block
      position: absolute
      width: 20%
      height: 20%
      border: 2px solid
      transition: all 0.6s ease
      border-radius: 2px

    &.type3::after
      bottom: 0
      right: 0
      border-top-color: transparent
      border-left-color: transparent
      border-bottom-color: $color3
      border-right-color: $color3

    &.type3::before
      top: 0
      left: 0
      border-bottom-color: transparent
      border-right-color: transparent
      border-top-color: $color3
      border-left-color: $color3

    &.type3:hover:after,
    &.type3:hover:before
      border-bottom-color: $color3
      border-right-color: $color3
      border-top-color: $color3
      border-left-color: $color3
      width: 100%
      height: 100%

  &.type4
    color: $color4
    
    &::after
      content: ''
      display: block
      position: absolute
      height: 2px
      width: 0
      left: 0
      background-color: red
      transition: width 0.3s ease-in-out

    &::after
      bottom: 0
    
    &:hover::after
      width: 50px
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.