Button by ercnersoy
#e8e8e8
1.button { 2 width: 200px; 3 padding: 20px 40px; 4 position: relative; 5 display: block; 6 text-decoration: none; 7 overflow: hidden; 8 border: 0; 9 cursor: pointer; 10 border-radius: 2rem; 11 box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.5); 12} 13 14.button:hover .wave { 15 top: -120px; 16} 17 18.text { 19 position: relative; 20 z-index: 1; 21 color: white; 22 font-size: 15px; 23 letter-spacing: 3px; 24 font-weight: 600; 25} 26 27.wave { 28 width: 200px; 29 height: 200px; 30 background-color: #27a9ff; 31 box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); 32 position: absolute; 33 left: 0; 34 top: -70px; 35 transition: 0.4s; 36} 37 38.wave::before, a .wave::after { 39 width: 200%; 40 height: 200%; 41 content: ""; 42 position: absolute; 43 top: 0; 44 left: 50%; 45 transform: translate(-50%, -75%); 46} 47 48.wave::before { 49 border-radius: 45%; 50 background-color: #0581b3; 51 animation: wave 5s linear infinite; 52} 53 54.wave::after { 55 border-radius: 40%; 56 background-color: rgba(20, 20, 20, 0.5); 57 animation: wave 10s linear infinite; 58} 59 60@keyframes wave { 61 0% { 62 transform: translate(-50%, -75%) rotate(0deg); 63 } 64 65 100% { 66 transform: translate(-50%, -75%) rotate(300deg); 67 } 68}
673 views
673 views
MIT License