#e8e8e8
1button { 2 width: 60px; 3 height: 60px; 4 transform: scale(1); 5 border-style: none; 6 outline: none; 7 cursor: pointer; 8 border-radius: 50%; 9 background: rgb(228, 232, 236); 10 background: linear-gradient(45deg, rgb(228, 232, 236) 0%, rgb(234 234 234) 100%); 11 box-shadow: -2px -7px 10px #f1f1f1, 4px 6px 10px #d4d7da; 12 transition: all .3s; 13} 14 15button:active { 16 background: rgb(218, 221, 224); 17 background: linear-gradient(45deg, rgb(218, 221, 224) 0%, rgb(241, 241, 241) 100%); 18 box-shadow: -2px -7px 10px #d4d7da, 19 4px 6px 10px #f1f1f1, 20 inset -2px -7px 10px #f1f1f1, 21 inset 4px 6px 10px #d4d7da; 22 transition: all .3s; 23 transform: scale(.95); 24} 25 26button i { 27 font-size: 20px; 28 background: linear-gradient(-45deg, gray 0%, lightgray 100%); 29 -webkit-background-clip: text; 30 -webkit-text-fill-color: transparent; 31 transition: all .3s; 32} 33 34button:active i { 35 transform: scale(.9); 36 transition: all .3s; 37} 38 39.svg { 40 width: 25px; 41 height: 60px; 42 border-style: none; 43 align-items: center; 44}
1.6K views
1.6K views
Comments
MIT License