body{ display: flex; justify-content: center; padding-top: 60px; background-color: #333642; } .m-button{ display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; position: relative; cursor: pointer; box-shadow: 0px 0px 100px 0px rgba(87,175,176,0.5); border-radius: 50%; background: linear-gradient(0deg, rgba(93,187,118,1) 0%, rgba(87,175,176,1) 100%); transition:.4s; } .m-button:active{ transform:scale(1.1) } .m-button__icon{ position: absolute; width: 30%; height: 30%; transition: 1s; } .m-button__icon:hover{ transform: scale(1.1); } .m-button__layer{ border-radius: 50%; position: absolute; width: 100%; height: 100%; background: rgba(93,187,118,0.3); background: linear-gradient(90deg, rgba(93,187,118,0.3) 0%, rgba(87,175,176,0.3) 100%); } .m-button__layer1{ animation: layer1 8s infinite ease-in-out; } .m-button__layer2{ animation: layer2 8s infinite ease-in-out; } .m-button__layer3{ animation: layer3 8s infinite ease-in-out; } .m-button__layer4{ animation: layer4 8s infinite ease-in-out; } @keyframes layer1 { 0% {transform: rotate(0deg) scaleX(1.1);} 50% {transform: rotate(180deg) scaleX(1.1);} 100% {transform: rotate(360deg) scaleX(1.1);} } @keyframes layer2 { 0% {transform: rotate(30deg) scaleX(1.2);} 50% {transform: rotate(210deg) scaleX(1.2);} 100% {transform: rotate(390deg) scaleX(1.2);} } @keyframes layer3 { 0% {transform: rotate(60deg) scaleX(1.15);} 50% {transform: rotate(240deg) scaleX(1.15);} 100% {transform: rotate(420deg) scaleX(1.15);} } @keyframes layer4 { 0% {transform: rotate(90deg) scaleX(1.16);} 50% {transform: rotate(270deg) scaleX(1.16);} 50% {transform: rotate(450deg) scaleX(1.16);} }