Button by Shoh2008
#e8e8e8
1button { 2 background-color: #0078d0; 3 border: 0; 4 border-radius: 56px; 5 color: #fff; 6 cursor: pointer; 7 display: inline-block; 8 font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif; 9 font-size: 18px; 10 font-weight: 600; 11 outline: 0; 12 padding: 16px 32px; 13 position: relative; 14 text-align: center; 15 text-decoration: none; 16 -webkit-transition: all .3s; 17 transition: all .3s; 18 -moz-user-select: none; 19 -ms-user-select: none; 20 user-select: none; 21 -webkit-user-select: none; 22 -ms-touch-action: manipulation; 23 touch-action: manipulation; 24} 25 26button:before { 27 background-color: initial; 28 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(rgba(255, 255, 255, 0))); 29 background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%); 30 border-radius: 125px; 31 content: ""; 32 height: 50%; 33 left: 4%; 34 opacity: .5; 35 position: absolute; 36 top: 0; 37 -webkit-transition: all .3s; 38 transition: all .3s; 39 width: 92%; 40} 41 42button:hover { 43 -webkit-box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; 44 box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px; 45 -webkit-transform: scale(1.05); 46 -ms-transform: scale(1.05); 47 transform: scale(1.05); 48}
876 views
876 views
MIT License