JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:500&quot; rel=&quot;stylesheet&quot;"></script>
<div class="example e1">
    <div class="button-group">
        <div class="text">home</div>
        <div class="icon zmdi zmdi-home"></div>
    </div>
</div>
<div class="example e2">
    <div class="button-group">
        <div class="text">account</div>
        <div class="icon zmdi zmdi-account"></div>
    </div>
</div>
<div class="example e3">
    <div class="button-group">
        <div class="text">woah this is crazy</div>
        <div class="icon zmdi zmdi-alert-triangle"></div>
    </div>
</div>

SASS

body
  font-family: 'Roboto', sans-serif
  padding: 20px
  -webkit-font-smoothing: antialiased

.example
  padding: 80px 40px
  text-align: center

.button-group
  cursor: pointer
  display: inline-flex
  
.text
  background: black
  color: white
  text-transform: uppercase
  font-size: 16px
  height: 50px
  line-height: 50px
  padding: 0 25px
  letter-spacing: 3px

.icon
  font-size: 24px
  width: 50px
  height: 50px
  line-height: 42px
  box-sizing: border-box
  border: 4px solid black
  border-left: none
  transition: 400ms transform ease-in-out
  transform: rotateY(90deg)
  transform-origin: left
  
.button-group:hover .icon
  transform: rotateY(0deg)

.button-group
  perspective: 200px
  perspective-origin: calc(100% - 55px);