Button by VD232004
#212121
1.unique-button { 2 display: flex; 3 align-items: center; 4 position: relative; 5 width: 180px; 6 height: 60px; 7 padding: 15px 30px; 8 font-size: 18px; 9 text-decoration: none; 10 color: #fff; 11 background-color: #a634db; 12 border: none; 13 border-radius: 10px; 14 overflow: hidden; 15 cursor: pointer; 16 transition: 0.3s all ease-in-out; 17} 18 19.unique-button:hover { 20 transition: 0.3s all ease-in-out; 21 box-shadow: 5px 10px 30px #a634db; 22} 23 24.unique-button span { 25 display: block; 26 margin-left: 0.3em; 27 transition: all 0.3s ease-in-out; 28} 29 30.unique-button:hover span { 31 transform: translateX(7em); 32} 33 34.unique-button:hover .svg-wrap { 35 animation: fly-1 0.6s ease-in-out infinite alternate; 36 z-index: 1; 37} 38 39.unique-button svg { 40 display: block; 41 transform-origin: center center; 42 transition: transform 0.3s ease-in-out; 43} 44 45.unique-button:hover svg { 46 transform: translateX(2.5em) rotate(45deg) scale(1.2); 47} 48 49.unique-button:active { 50 transform: scale(0.95); 51} 52 53@keyframes fly-1 { 54 from { 55 transform: translateY(0.1em); 56 } 57 58 to { 59 transform: translateY(-0.1em); 60 } 61} 62 63.unique-button::before { 64 content: ""; 65 position: absolute; 66 top: 50%; 67 left: 50%; 68 transform: translate(-50%, -50%); 69 width: 0; 70 height: 80%; 71 border-bottom-left-radius: 60px; 72 border-top-right-radius: 60px; 73 border-top-left-radius: 20px; 74 border-bottom-right-radius: 20px; 75 background-color: #2c3e50; 76 transition: all 0.2s ease-in-out; 77} 78 79.unique-button:hover::before { 80 width: 100%; 81} 82 83.unique-button::after { 84 content: ""; 85 position: absolute; 86 top: 50%; 87 left: 50%; 88 transform: translate(-50%, -50%); 89 width: 80%; 90 height: 0; 91 border-bottom-left-radius: 20px; 92 border-top-right-radius: 20px; 93 border-top-left-radius: 60px; 94 border-bottom-right-radius: 60px; 95 background-color: #2c3e50; 96 transition: all 0.3s ease-in-out; 97} 98 99.unique-button:hover::after { 100 height: 100%; 101} 102
244 views
244 views
MIT License