Button by KhaledMatalkah
#212121
1.button { 2 background: transparent; 3 color: #fff; 4 padding: 10px 20px; 5 font-size: 18px; 6 border-radius: 5px; 7 cursor: pointer; 8 border: 2px solid rgba(255, 255, 255, 0.5); 9 backdrop-filter: blur(5px); 10 transition: background-color 0.3s ease-in-out; 11 position: relative; 12 overflow: hidden; 13} 14 15.button:before { 16 content: ""; 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 100%; 21 height: 100%; 22 background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); 23 transform: translateX(-100%); 24 transition: transform 0.3s ease-in-out; 25 pointer-events: none; 26} 27 28.button:hover { 29 background-color: rgba(255, 255, 255, 0.2); 30} 31 32.button:hover:before { 33 transform: translateX(0); 34} 35
491 views
491 views
MIT License