310 views
CSS
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}
HTML
1 2 <button class="btn"><svg class="svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="256.000000pt" height="256.000000pt" viewBox="0 0 256.000000 256.000000" preserveAspectRatio="xMidYMid meet"> 3 <g transform="translate(0.000000,256.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> 4 <path d="M200 2525 c-60 -19 -123 -74 -152 -133 -22 -44 -23 -60 -26 -269 -4 -213 -3 -222 17 -242 l21 -21 1180 0 1180 0 -2 -820 -3 -820 -38 -37 -37 -38 -1058 0 c-1041 0 -1057 0 -1084 20 -60 44 -58 23 -58 729 0 633 0 646 -20 666 -11 11 -29 20 -40 20 -11 0 -29 -9 -40 -20 -20 -20 -20 -33 -20 -663 0 -738 -2 -716 80 -797 84 -85 13 -80 1180 -80 1167 0 1096 -5 1180 80 85 84 80 13 80 1180 0 1167 5 1096 -80 1180 -84 85 -12 80 -1184 79 -853 0 -1039 -3 -1076 -14z m231 -254 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m400 0 c64 -65 20 -171 -71 -171 -33 0 -48 6 -71 29 -64 65 -20 171 71 171 33 0 48 -6 71 -29z m1427 -27 c30 -20 30 -68 0 -88 -20 -14 -82 -16 -482 -16 -413 0 -461 2 -478 17 -22 20 -23 61 -1 85 15 17 43 18 477 18 402 0 464 -2 484 -16z"></path> 5 </g> 6 </svg> 7 <i class="fas fa-fingerprint"></i> 8 </button>