#212121
1.button { 2 position: relative; 3 transition: all 0.3s ease-in-out; 4 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); 5 padding-block: 0.5rem; 6 padding-inline: 1.25rem; 7 background-color: rgb(0 107 179); 8 border-radius: 9999px; 9 display: flex; 10 align-items: center; 11 justify-content: center; 12 color: #ffff; 13 gap: 10px; 14 font-weight: bold; 15 border: 3px solid #ffffff4d; 16 outline: none; 17 overflow: hidden; 18 font-size: 15px; 19} 20 21.icon { 22 width: 24px; 23 height: 24px; 24 transition: all 0.3s ease-in-out; 25} 26 27.button:hover { 28 transform: scale(1.05); 29 border-color: #fff9; 30} 31 32.button:hover .icon { 33 transform: translate(4px); 34} 35 36.button:hover::before { 37 animation: shine 1.5s ease-out infinite; 38} 39 40.button::before { 41 content: ""; 42 position: absolute; 43 width: 100px; 44 height: 100%; 45 background-image: linear-gradient( 46 120deg, 47 rgba(255, 255, 255, 0) 30%, 48 rgba(255, 255, 255, 0.8), 49 rgba(255, 255, 255, 0) 70% 50 ); 51 top: 0; 52 left: -100px; 53 opacity: 0.6; 54} 55 56@keyframes shine { 57 0% { 58 left: -100px; 59 } 60 61 60% { 62 left: 100%; 63 } 64 65 to { 66 left: 100%; 67 } 68} 69
2K views
2K views
Comments
Variations
1 MIT License