JSFiddle - React, Tailwind, and code Playground

by batya15

HTML

.button-rock
    .value Купить
    .loader
      span
      span
      span
  .button-rock.disable
    .value Выбросить
    .loader
      span
      span
      span
  .button-rock.wait
    .value Загрузка
    .loader
      span
      span
      span

SCSS

=keyframes($animation-name)
  @-webkit-keyframes #{$animation-name}
    @content

  @-moz-keyframes #{$animation-name}
    @content

  @keyframes #{$animation-name}
    @content

=animation($str)
  -webkit-animation: #{$str}


.button-rock
  display: inline-block
  margin: 50px
  height: 34px
  width: 95px
  background: url("/img/buttons.png") 0 -68px no-repeat
  cursor: pointer
  text-align: center
  line-height: 34px
  color: #9bd6db
  overflow: hidden
  text-shadow: 1px 1px 0 #003c57
  font-family: tahoma, arial, verdana, sans-serif, Lucida Sans
  font-size: 11px
  font-weight: bold

  .loader
    display: none
    height: 100%
    width: 100%
    line-height: 32px
    box-shadow: 1px 1px 0 #003c57

    span
      height: 3px
      width: 12px
      background-color: #9bd6db
      display: inline-block
      margin: 2px
      opacity: 0

      &:nth-child(1)
        +animation("preloader 0.6s linear 0s infinite alternate")

      &:nth-child(2)
        +animation("preloader 0.6s linear 0.3s infinite alternate")

      &:nth-child(3)
        +animation("preloader 0.6s linear 0.6s infinite alternate")

  &:hover
    background-position: 0 -34px
    color: #daf7ff

  &:active
    background-position: 0 0

  &.disable
    color: #005568

    &:hover
      background-position: 0 -68px
      color: #005568

    &:active
      background-position: 0 -68px

  &.wait

    &:hover
    background-position: 0 -68px
    color: #005568

    &:active
      background-position: 0 -68px

    .value
      display: none

    .loader
      display: block

+keyframes(preloader)
  0%
    opacity: 0
  50%
    opacity: 0
  100%
    opacity: 1