JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div class="circle">
  <span class="label">
		Snabbkoll
	</span>
</div>

CSS

.label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  font-size: .8em;
  font-family: Sans-serif;
  position: relative;
  z-index: 2;
}

.label,
.circle {
  height: 80px;
  width: 80px;
}

.circle {
  margin: 100px;
  position: relative;
  cursor: pointer;
  -webkit-transition: height .25s ease, width .25s ease;
  transition: height .25s ease, width .25s ease;
  z-index: 1;
}

.circle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 3px 1px #4AAF57;
}

.circle:active {
  transform: scale(1);
  box-shadow: none;
}

.circle,
.circle:before,
.circle:after {
  border-radius: 100%;
  background-color: #4AAF57;
}

.circle:before,
.circle:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .25;
  z-index: 1;
}

.circle:before {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}

.circle:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}

.circle:hover:before,
.circle:hover:after {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.35);
    opacity: .15;
  }
  100% {
    -webkit-transform: scale(1.55);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.35);
    opacity: .15;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}