JSFiddle - React, Tailwind, and code Playground

by thewolff

HTML

<a href="#" class="bubble expose-square-solid">
    <span>See more dusty old cars</span>
</a>

CSS

.bubble{
  /* Make it an inline-block element so we can specify the size */
  display: inline-block;

  /* Size */
  width: 100px;
  height: 100px;
  
  /* Set the box-sizing so the border fit's within our specified size*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;          

  border: 50px solid #000;
            
  background: #f00;
  
  /* The transition from :hover -> normal */
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;          
}

/* Hide the text */
.bubble > span{
  display: block;
  overflow: hidden;
  text-indent: -10000px;
  font-size: 1px;

  width: 1px;
  height: 1px;        
  position: absolute;
}

/* The hovered state */
.bubble:hover {
  border-width: 2px;
    
  /* The transition from normal > :hover */
  -webkit-transition-duration:0.5s;
  -moz-transition-duration:0.5s;
  -ms-transition-duration:0.5s;
  -o-transition-duration:0.5s;
  transition-duration:0.5s;
}