$button-size : 100px $half-size: $button-size / 2 $button-color: transparentize($white, 0.2) .play-button border-color: transparent $button-color transparent $button-color border-style: solid border-width: $half-size 0 $half-size $button-size bottom: 50% box-sizing: border-box height: $button-size left: 50% transform: translate3d(-50%, 50%, 0) rotate(0) position: absolute width: $button-size .play-button_pause, .play-button_transitioning transition: transform 0.3s, border-top-width 0.3s, border-bottom-width 0.3s .play-button_pause border-width: 0 0 0 $button-size transform: translate3d(-50%, 50%, 0) rotate(90deg) .play-button_transitioning border-width: $half-size $button-size $half-size 0 transform: translate3d(-50%, 50%, 0) rotate(180deg) .play-button_main transform: translate3d(-50%, 50%, 0) rotate(0) scale(0.5) .play-button_main.play-button_pause transform: translate3d(-50%, 50%, 0) rotate(90deg) scale(0.5) .play-button_main.play-button_transitioning transform: translate3d(-50%, 50%, 0) rotate(180deg) scale(0.5)
