Button by doniaskima
#e8e8e8
1.btn-11, 2.btn-11 *, 3.btn-11 :after, 4.btn-11 :before, 5.btn-11:after, 6.btn-11:before { 7 border: 0 solid; 8 box-sizing: border-box; 9} 10 11.btn-11 { 12 -webkit-tap-highlight-color: transparent; 13 -webkit-appearance: button; 14 background-color: #000; 15 background-image: none; 16 color: #fff; 17 cursor: pointer; 18 font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 19 Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 20 Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; 21 font-size: 100%; 22 font-weight: 900; 23 line-height: 1.5; 24 margin: 0; 25 -webkit-mask-image: -webkit-radial-gradient(#000, #fff); 26 padding: 0; 27 text-transform: uppercase; 28} 29 30.btn-11:disabled { 31 cursor: default; 32} 33 34.btn-11:-moz-focusring { 35 outline: auto; 36} 37 38.btn-11 svg { 39 display: block; 40 vertical-align: middle; 41} 42 43.btn-11 [hidden] { 44 display: none; 45} 46 47.btn-11 { 48 border-radius: 99rem; 49 border-width: 2px; 50 overflow: hidden; 51 padding: 0.8rem 3rem; 52 position: relative; 53} 54 55.btn-11 span { 56 mix-blend-mode: difference; 57} 58 59.btn-11:before { 60 -webkit-animation: bg-scroll 3s linear infinite; 61 animation: bg-scroll 3s linear infinite; 62 -webkit-animation-play-state: paused; 63 animation-play-state: paused; 64 background: repeating-linear-gradient( 65 45deg, 66 hsla(0, 0%, 100%, 0.2), 67 hsla(0, 0%, 100%, 0.2) 0.7%, 68 transparent 0, 69 transparent 4% 70 ); 71 content: ""; 72 display: block; 73 height: 300%; 74 left: -100%; 75 opacity: 0; 76 position: absolute; 77 top: 0; 78 transition: opacity 0.3s, background-color 0.2s; 79 width: 300%; 80} 81 82.btn-11:hover:before { 83 -webkit-animation-play-state: running; 84 animation-play-state: running; 85 opacity: 1; 86} 87 88.btn-11:active:before { 89 background-color: #fff; 90} 91 92@-webkit-keyframes bg-scroll { 93 0% { 94 transform: translateX(0); 95 } 96 97 to { 98 transform: translateX(33%); 99 } 100} 101 102@keyframes bg-scroll { 103 0% { 104 transform: translateX(0); 105 } 106 107 to { 108 transform: translateX(33%); 109 } 110} 111
474 views
474 views
MIT License