Button by pradipkaityuiux
#e8e8e8
1.button { 2 background-color: #000fdb; 3 border: none; 4 padding: 20px 48px; 5 color: #fff; 6 cursor: pointer; 7 border-radius: 40px; 8 position: relative; 9 z-index: 10; 10 overflow: hidden; 11} 12 13.button span { 14 font-size: 24px; 15 font-weight: bold; 16} 17 18.button::before, 19.button::after { 20 content: ""; 21 position: absolute; 22 width: 100px; 23 height: 100px; 24 border-radius: 50px; 25 z-index: -1; 26 background-color: #535fff; 27 transition: all 0.3s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1); 28} 29 30.button::after { 31 right: -30px; 32 transform: translateX(30px) translateY(-110px) rotate(30deg); 33} 34 35.button::before { 36 left: -20px; 37 transform: translateX(-10px) translateY(50px) rotate(30deg); 38} 39 40.button:hover::before { 41 transform: rotate(30deg) translateY(10px) translateX(-15px); 42} 43 44.button:hover::after { 45 transform: rotate(30deg) translateY(-70px) translateX(-30px); 46} 47 48.button:hover { 49 animation: wobel 0.3s ease-in-out; 50} 51 52@keyframes wobel { 53 0% { 54 transform: scale(1); 55 } 56 57 20% { 58 transform: scale(1.1); 59 } 60 61 60% { 62 transform: scale(1.05); 63 } 64 65 80% { 66 transform: scale(0.85); 67 } 68 69 100% { 70 transform: scale(1); 71 } 72}
562 views
562 views
MIT License