animation

by bvotcode

HTML

<div class="zoom-in-zoom-out"> Mua hĂ ng</div>
<button class="zoom-in-zoom-out"> abc </button>

CSS

.zoom-in-zoom-out {
  display: inline-block;
  padding: .75rem 1.25rem;
  border-radius: 10rem;
  color: #fff;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .5s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin: 24px;
  width: 100px;
  height: 20px;
  padding-top:35px;
  background-image: linear-gradient(to right, #FF512F 0%, #DD2476  51%, #FF512F  100%);
  animation: zoom-in-zoom-out 2s ease-out infinite;
  text-align: center;  <--------- Here
  line-height: 65px;   <--------- Here
 
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}