Button by AmIt-DasIT
#e8e8e8
1.box { 2 width: 45px; 3 height: 45px; 4 background: #5cda5c; 5 border-radius: 25px; 6 display: flex; 7 justify-items: center; 8 justify-content: center; 9 align-items: center; 10 transition: 0.3s; 11 cursor: pointer; 12 position: relative; 13} 14 15.arrow { 16 border: solid black; 17 border-width: 0 3px 3px 0; 18 display: inline-block; 19 padding: 3px; 20} 21 22.right { 23 transform: rotate(-45deg); 24} 25 26.box:hover { 27 width: 160px; 28 background: linear-gradient(to right, #26d526, yellow); 29} 30 31.box:hover .arrow { 32 display: none; 33} 34 35.box .text { 36 display: none; 37} 38 39.box:hover .text { 40 display: flex; 41 font-size: 16px; 42 font-weight: 550; 43 color: black; 44 letter-spacing: 0.6px; 45 animation: anima 0.6s ease; 46} 47 48@keyframes anima { 49 0% { 50 opacity: 0; 51 } 52 53 100% { 54 opacity: 1; 55 } 56} 57 58.box:active { 59 background: linear-gradient(to right, rgb(38, 213, 38, 0.8), rgba(255, 255, 0, 0.8)); 60} 61
881 views
881 views
MIT License