Button by ArturCodeCraft
#212121
1/* <reset-style> ============================ */ 2button { 3 border: none; 4 background: none; 5 padding: 0; 6 margin: 0; 7 cursor: pointer; 8 font-family: inherit; 9} 10/* <main-style> ============================ */ 11.menu__button { 12 min-width: 62px; 13 height: 36px; 14 display: flex; 15 justify-content: center; 16 align-items: center; 17 padding: 8px 16px; 18 background-color: #fff; 19 transition: background-color .4s; 20} 21 22.menu__button span { 23 color: #000; 24 line-height: 1; 25 transition: color .4s; 26} 27 28.menu__button:hover { 29 background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, 30 linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, 31 linear-gradient(0deg, #fff 50%, transparent 0) repeat-y, 32 linear-gradient(0deg, #fff 50%, transparent 0) repeat-y; 33 background-size: 6px 2px, 6px 2px, 2px 6px, 2px 6px; 34 background-position: 0 0, 0 100%, 0 0, 100% 0; 35 animation: linearGradientMove .4s infinite linear; 36} 37 38.menu__button:hover span { 39 color: #fff; 40} 41 42@keyframes linearGradientMove { 43 100% { 44 background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px; 45 } 46}
Β
338 views
Variation of abutton
MIT License