Live button animation

index.html

<div class="toolbar">
  <a href="#" class="btn btn_transparent">What's New</a>
  <a href="#" class="btn btn_transparent">Support</a>
  <a href="#" class="btn btn_transparent">Link</a>
  <a href="#" class="btn btn_live">Live<span class="live-icon"></span></a>
</div>
<small>+ <b>Hover</b> state</small>

live-button-animation.markdown

Live button animation

A Pen by alexander-albul on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&subset=cyrillic');

$bodyBgc: #0288D1;
$white: #fff;
$btnPaddingScalePlus: 1.2;
$btnPaddingScaleMinus: .95;

body{  
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto;
  background-color: $bodyBgc;
  color: $white;
  min-width: 200px;
}

.toolbar{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

.toolbar .btn{
  display: block;
  font-weight: 700;
  position: relative;
  padding: 13px 25px;
  background-color: rgba($white,.9);
  text-decoration: none;
  color: #333;
  border-radius: 50px;
  border: 1px solid white;
  box-shadow: 0px 2px 0px darken($bodyBgc,10%);
  transition: all .2s;
  z-index: 1;
  outline: none;
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
  &:hover{
    transform: translateY(-5px) 
      // scale(1.05,1.05)
    ;
    padding: calc(13px * #{$btnPaddingScalePlus}) calc(25px * #{$btnPaddingScalePlus});
    padding-right: calc(22px * $btnPaddingScalePlus);
    background-color: rgba(#fff,1);
    border: none;
    box-shadow: 0px 5px 10px darken($bodyBgc,7%);
  }
  &:hover > span:before{
    animation: none;
  }
  &:active{
      transform: translateY(0px) 
      // scale(.95,.95)
      ;
    padding: calc(13px * #{$btnPaddingScaleMinus}) calc(25px * #{$btnPaddingScaleMinus});
      box-shadow: inset 0px 2px 1px darken($bodyBgc,10%);
  }
}

.toolbar .btn_transparent{
  border: 0px;
  border-radius: 0px;
  padding: 13px 25px;
  background-color: rgba($white,0);
  color: $white;
  box-shadow: none;
  &:hover{
    box-shadow: none;
    background-color: inherit;
  }
}

.toolbar .btn_live{
  padding-right: 22px; 
}

span.live-icon{
    display: inline-block;
    position: relative;
    top: calc(50% - 5px);
    background-color: red;
    width: 10px;
    height: 10px;
    margin-left: 20px;
    border: 1px solid rgba(black, .1);
    border-radius: 50%;
    z-index: 1;
    &:before{
      content: '';
      display: block;
      position: absolute;
      background-color: rgba(red,.6);
      width: 100%;
      height: 100%;
      border-radius: 50%;
      animation: live 2s ease-in-out infinite;
      z-index: -1;
    }
  }
@keyframes live {
  0% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(3.5,3.5);
    background-color: rgba(red,0);
  }
}

small{
  position: absolute;
  font-size: 0.9em;
  color: rgba(white, .5);
  bottom: 2rem;
  b{
  font-weight: bold;
  color: rgba(white,.8);
  z-index: -1;
  }
}

@media only screen and (max-width: 500px) {
  .toolbar {
    flex-direction: column;
    padding-left: 50px;
    padding-right: 50px;
  }
  .btn {
    width: 250px;
  }
  span.live-icon{
    position: absolute;
    right: 20px;
  }
}

@media only screen and (max-width: 350px) {
  .btn{
    width: 100%;
  }
}