Button by AlimurtuzaCodes
#e8e8e8
1.btn { 2 border: none; 3 width: 15em; 4 height: 5em; 5 border-radius: 3em; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 gap: 12px; 10 background: #1C1A1C; 11 cursor: pointer; 12 transition: all 450ms ease-in-out; 13} 14 15.sparkle { 16 fill: #AAAAAA; 17 transition: all 800ms ease; 18} 19 20.text { 21 font-weight: 600; 22 color: #AAAAAA; 23 font-size: medium; 24} 25 26.btn:hover { 27 background: linear-gradient(0deg,#A47CF3,#683FEA); 28 box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4), 29 inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2), 30 0px 0px 0px 4px rgba(255, 255, 255, 0.2), 31 0px 0px 180px 0px #9917FF; 32 transform: translateY(-2px); 33} 34 35.btn:hover .text { 36 color: white; 37} 38 39.btn:hover .sparkle { 40 fill: white; 41 transform: scale(1.2); 42}
6.6K views
6.6K views
MIT License