427 views
1button { 2 padding: 0.5rem 2.5rem 0.5rem 2.5rem; 3 box-shadow: 0px 0px 0px 3px black; 4 border: 0; 5 border-radius: 0.5rem; 6 font-size: 1rem; 7 background-color: #ffc83d; 8 color: black; 9 font-weight: bolder; 10 font-family: Verdana, Geneva, Tahoma, sans-serif; 11 position: relative; 12 transition: all .9s ease-in-out; 13 letter-spacing: 0.1rem; 14 text-transform: uppercase; 15} 16 17button:hover { 18 background-color: #f03a17; 19 color: white; 20} 21 22button::before { 23 content: "π"; 24 position: absolute; 25 left: -0rem; 26 top: 0rem; 27 opacity: 1; 28 font-size: 1.55rem; 29 transition: all .9s ease-in-out; 30 transform: rotate(0deg); 31} 32 33button:hover::before { 34 content: "π"; 35 opacity: 1; 36 visibility: visible; 37 transform: rotate(40deg); 38 font-size: 2.5rem; 39 top: -0.75rem; 40 transition: all .9s ease-in-out; 41 animation: rightRun 2s forwards; 42} 43 44button:active::before { 45 content: "π₯°"; 46} 47 48@keyframes rightRun { 49 100% { 50 transform: translateX(140px); 51 } 52}
ercnersoy
Ercan Ersoy
MIT License