JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="btn">
  <div class="shape">
    <div class="icon">+</div>
    <div class="text">Create team</div>
  </div>
</div>

SCSS

$transitionTime: 0.35s;
$transitionTimeShape: $transitionTime * 1.5;
$transitionEasing: cubic-bezier(0, 0, 0, 0.9);
$btnSize: 130px;
$btnSizeColapsed: 42px;
$iconWrapSize: 24px;
$iconRotate: 90deg;

.btn {
  display: flex;
  width: $btnSize;
  height: $btnSizeColapsed;
  justify-content: center;
  cursor: pointer;
  
  
  .shape {
    display: flex;
    overflow: hidden;
    border: solid 1px #d2d2d2;
    align-items: center;
    max-width: $btnSizeColapsed;
    max-height: $btnSizeColapsed;
    border-radius: $btnSizeColapsed / 2;
  }
  
    &:hover .shape{
    background: #fafafa;
  }
  
    &:active .shape{
    background: #d2d2d2;
  }
  
  .text {
    min-width: 90px;
    transform: translateX(25%);
    opacity: 0;
    height: 24px;
    line-height: 26px;
  }
  
  .icon {
    min-width: $iconWrapSize;
    height: $iconWrapSize;
    line-height: $iconWrapSize;
    text-align: center;
    transform: translateX(($btnSizeColapsed - $iconWrapSize) / 2) rotateZ($iconRotate);
  }
  
  .icon,
  .text {
    transition: $transitionTime $transitionEasing;
  }
  .shape {
    transition: max-width $transitionTimeShape $transitionEasing, border-radius $transitionTimeShape $transitionEasing;
  }
  
  
}
  
body:hover .btn{
      .text {
        transform: translateX(0%);
        opacity: 1;
      }
.shape{
  max-width: $btnSize;
  width: $btnSize;
  border-radius: $btnSizeColapsed / 4;
}      
        .icon{
          transform: translate(0) rotate(0);
        }
  }
  






body {
  display: flex;
  min-height: 100vh;
  background: #f2f2f2;
  font-family: Helvetica Neue, sans-serif;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}