.container
  a.btn-ghost(href="#")
    span.line.top.-h
    span.line.right.-v
    span.line.bottom.-h
    span.line.left.-v
    | transformers

*, *::before, *::after
  box-sizing: border-box

.container
  display: flex
  align-items: center
  justify-content: center
  width: 100vw
  height: 100vh
  background: #2d2d2d

.btn-ghost
  position: relative
  z-index: 1
  padding: 1rem 2rem
  border: 1px solid rgba(#FFF, .54)
  text-decoration: none
  color: rgba(#FFF, .54)
  &:hover
    color: #000

// 線
.btn-ghost
  .line
    position: absolute
    background: #FFF
    transform: scale(0)
    transition: transform .1s ease
    // 水平線
    &.-h
      width: 100%
      height: 1px
    // 垂直線
    &.-v
      width: 1px
      height: 100%
    &.top
      top: -1px
      left: 0
      transform-origin: left
    &.right
      top: 0
      right: -1px
      transform-origin: top
    &.bottom
      bottom: -1px
      right: 0
      transform-origin: right
    &.left
      bottom: 0
      left: -1px
      transform-origin: bottom

// 線的效果
.btn-ghost
  .line
    &.top
      transition-delay: .3s
    &.right
      transition-delay: .2s
    &.bottom
      transition-delay: .1s
    &.left
      transition-delay: 0
.btn-ghost:hover
  color: #FFF
  .line
    transform: scale(1)
    &.top
      transition-delay: 0s
    &.right
      transition-delay: .1s
    &.bottom
      transition-delay: .2s
    &.left
      transition-delay: .3s