animace tlačítka menu

by Petr Haluza

HTML

<div class="btn-mega"><span></span>Zobrazit katalog</div>

CSS

.btn-mega {

    font-weight: 600;
    font-size: 16px;
    color: #fefefe;
    height: 65px;
    padding-left: 87px;
    line-height: 65px;
    background-color: #484848;
    border-radius: 8px;
    position: relative;
    z-index: 98;
    cursor: pointer;

}
.btn-mega > span {
    position: absolute;
    height: 2px;
    width: 18px;
    left: 46px;
    top: 31px;
    background-color: #fff;
    display: inline-block;}
.btn-mega > span::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 24px;
    top: -7px;
    background-color: #fff;
    animation: wobble 2s infinite;}
.btn-mega > span::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 24px;
    top: 7px;
    background-color: #fff;
    animation: wobble2 2s infinite;}
    
  @keyframes wobble {
  60% { transform: translateY(0px); }
  75% { transform: translateY(-4px); }
  80% { transform: translateY(0px); }
  87% { transform: translateY(-2px); }
  90% { transform: translateY(0px); }
  }
  @keyframes wobble2 {
  60% { transform: translateY(0px); }
  75% { transform: translateY(4px); }
  80% { transform: translateY(0px); }
  87% { transform: translateY(2px); }
  90% { transform: translateY(0px); }
  }