Button by barisdogansutcu
#e8e8e8
1button { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 gap: 10px; 6 padding: 0 10px; 7 color: white; 8 text-shadow: 2px 2px rgb(116, 116, 116); 9 text-transform: uppercase; 10 cursor: pointer; 11 border: solid 2px black; 12 letter-spacing: 1px; 13 font-weight: 600; 14 font-size: 17px; 15 background-color: hsl(49deg 98% 60%); 16 border-radius: 50px; 17 position: relative; 18 overflow: hidden; 19 transition: all 0.5s ease; 20} 21 22button:active { 23 transform: scale(0.9); 24 transition: all 100ms ease; 25} 26 27button svg { 28 transition: all 0.5s ease; 29 z-index: 2; 30} 31 32.play { 33 transition: all 0.5s ease; 34 transition-delay: 300ms; 35} 36 37button:hover svg { 38 transform: scale(3) translate(50%); 39} 40 41.now { 42 position: absolute; 43 left: 0; 44 transform: translateX(-100%); 45 transition: all 0.5s ease; 46 z-index: 2; 47} 48 49button:hover .now { 50 transform: translateX(10px); 51 transition-delay: 300ms; 52} 53 54button:hover .play { 55 transform: translateX(200%); 56 transition-delay: 300ms; 57} 58
21K views
21K views
MIT License