JSFiddle - React, Tailwind, and code Playground

by wwt

HTML

<a href="#">Подробнее</a>

SCSS

a {
  color: #000;
  display: block;
  width: 150px;
  height: 30px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 30px;
  position: relative;
  background: #fff;
  text-transform: uppercase;
  font-weight: bold;
  background-color: rgb(255, 255, 0);
  text-decoration: none;
  
  box-shadow: 0 26px 0 -15px #fff inset, 0 -26px 0 -15px #fff inset;
  transition: box-shadow .3s ease-out 0.1s;
  
  &:hover {
    box-shadow: 0 0 0 -15px #fff inset, 0 0 0 -15px #fff inset;
  }
  
  &:focus {
    background-color: rgb(252, 202, 25);
    color: #666;
    box-shadow: 0 0 0 -15px #fff inset, 0 0 0 -15px #fff inset;
  }
}