![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by joe-herbert
#e8e8e8
1.button { 2 cursor: pointer; 3 padding: 20px 15px; 4 font-weight: 600; 5 font-size: 17px; 6 font-family: sans-serif; 7 border-radius: 15px; 8 position: relative; 9 background-clip: padding-box; 10 border: solid 3px transparent; 11 width: 185px; 12 height: 65px; 13 box-shadow: 5px 5px 20px -5px #aaa; 14 transition: transform 0.3s; 15} 16.button span { 17 transition: opacity 0.3s 0.3s; 18 margin-left: 5px; 19} 20.button:before { 21 content: ""; 22 position: absolute; 23 top: 0; 24 right: 0; 25 bottom: 0; 26 left: 0; 27 z-index: -1; 28 margin: -3px; 29 border-radius: inherit; 30 background: linear-gradient(to bottom, #ccc, #666); 31} 32.button:after { 33 content: ""; 34 position: absolute; 35 top: 0; 36 right: 0; 37 bottom: 0; 38 left: 0; 39 background: linear-gradient(to bottom, #eee, #ddd); 40 border-radius: 15px; 41} 42.button-content { 43 position: absolute; 44 top: 50%; 45 left: 0; 46 right: 0; 47 z-index: 1; 48 transform: translateY(-50%); 49} 50.button-content:before { 51 content: ""; 52 position: absolute; 53 z-index: -1; 54 top: calc(-50% - 2.5px); 55 right: 5px; 56 bottom: 5px; 57 left: 5px; 58 background: linear-gradient(to bottom, #dfdfdf, #efefef); 59 border-radius: 500px; 60 height: 50px; 61 transition: opacity 0.3s 0.3s; 62 filter: blur(1px); 63} 64.button svg { 65 position: relative; 66 left: 0; 67 width: 20px; 68 transform: rotate(-45deg); 69 transition: left 0.3s 0s, transform 0.3s 0s; 70} 71 72.button:hover .button-content:before, 73.button:hover span { 74 opacity: 0; 75 transition: opacity 0.3s; 76} 77.button:hover svg { 78 transition: left 0.6s 0.3s, transform 0.6s 0.3s; 79 left: calc(50% - 17.5px); 80 transform: translate(-50%, 2px) rotate(270deg) scale(1.5); 81} 82.button:active { 83 transform: scale(0.9); 84} 85.button:active svg { 86 animation: spin 0.4s ease-in-out 0.3s 1; 87} 88 89@keyframes spin { 90 from { 91 transform: translate(-50%, 2px) rotate(270deg) scale(1.5); 92 } 93 to { 94 transform: translate(-50%, 2px) rotate(630deg) scale(1.5); 95 } 96} 97
55 views
55 views
MIT License