![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by ChanduOffl
#000000
1.button { 2 display: inline-flex; 3 align-items: center; 4 padding: 10px 20px; 5 background-color: #fefefe; 6 border: 1px solid #dcdcdc; 7 border-radius: 12px; 8 9 font-family: "Ubuntu", sans-serif; 10 font-size: 16px; 11 font-weight: bold; 12 color: #333; 13 cursor: pointer; 14 text-decoration: none; 15 transition: all 0.3s ease; 16 position: relative; 17 overflow: hidden; 18 z-index: 0; 19 outline: 2px solid #fafafa; 20 box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d, 21 inset 0 0 0 2px rgba(192, 192, 192, 0.25); 22} 23 24.button::before { 25 content: ""; 26 position: absolute; 27 top: 3px; 28 left: 3px; 29 right: 3px; 30 bottom: 3px; 31 border-radius: 30px; 32 background: linear-gradient( 33 0deg, 34 #fbfbfb 0%, 35 #fafafa 5%, 36 #f7f7f7 72%, 37 #f2f2f2 86%, 38 #f0f0f0 100% 39 ); 40 box-shadow: inset 0 2px 7px rgba(143, 143, 143, 0.16); 41 transition: all 0.3s ease; 42 z-index: -1; 43 margin: 2px; 44} 45 46.button:hover::before { 47 top: 1px; 48 left: 1px; 49 right: 1px; 50 bottom: 1px; 51 margin: 5px; 52} 53 54.button:focus { 55 outline: 2px solid #fefefe; 56 box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d, 57 inset 0 0 0 2px rgba(192, 192, 192, 0.5); 58} 59 60.send-icon { 61 margin-right: 5px; 62 transition: transform 0.3s ease; 63} 64 65.button:hover .send-icon { 66 transform: translateX(7px); 67} 68 69.button:focus .send-icon { 70 transform: rotate(-40deg); 71} 72
210 views
210 views
MIT License