![](/build/_assets/logo-png-XGWSYHKJ.png)
Button by neerajbaniwal
#e8e8e8
1.button { 2 display: inline-flex; 3 align-items: center; 4 padding: 15px 40px; 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:focus { 47 outline: 2px solid #fefefe; 48 box-shadow: 9px 9px 44px #cecece3a, -9px -9px 44px #d3d3d33d, 49 inset 0 0 0 2px rgba(192, 192, 192, 0.5); 50} 51 52.send-icon { 53 margin-right: 5px; 54 transition: transform 0.3s ease; 55} 56 57.button:hover span { 58 transform: translateX(7px); 59 transition: all 0.4s; 60} 61 62.button span { 63 transform: rotate(-40deg); 64 margin-right: 10px; 65 transition: all 0.4s; 66} 67
29 views
29 views
MIT License