Button by ShrinilDhorda
#212121
1.button { 2 padding: 0.8rem 4rem; 3 border: none; 4 outline: none; 5 font-size: 1.3rem; 6 border-radius: 0.3rem; 7 font-weight: 600; 8 background-color: rgba(255, 255, 255, 0.953); 9 position: relative; 10 overflow: hidden; 11 cursor: pointer; 12 transition: 0.4s ease-in-out; 13} 14 15.button .text { 16 position: absolute; 17 left: 1.8rem; 18 top: 1.3rem; 19 transition: 0.4s ease-in-out; 20 color: rgb(50, 50, 50); 21} 22 23.svg { 24 transform: translateY(-20px) rotate(30deg); 25 opacity: 0; 26 width: 2rem; 27 transition: 0.4s ease-in-out; 28} 29 30.button:hover { 31 background-color: rgb(50, 50, 50); 32} 33 34.button:hover .svg { 35 display: inline-block; 36 transform: translateY(0px) rotate(0deg); 37 opacity: 1; 38} 39 40.button:hover .text { 41 opacity: 0; 42} 43 44.button:active { 45 scale: 0.97; 46}
1.2K views
1.2K views
MIT License