Button by htwarriors108
#e8e8e8
1button { 2 position: relative; 3 border: none; 4 margin: 10px; 5 background-color: transparent; 6} 7 8button a { 9 width: 80px; 10 height: 80px; 11 border-radius: 15px; 12 display: flex; 13 justify-content: center; 14 align-items: center; 15 border: 1px solid rgba(255, 255, 255, 0.5); 16 border-right: 1px solid rgba(255, 255, 255, 0.2); 17 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 18 box-shadow: 0 5px 45px rgba(0, 0, 0, 0.3); 19 backdrop-filter: blur(2px); 20 transition: 0.5s; 21 overflow: hidden; 22 background-color: rgba(255, 255, 255, 0.1); 23} 24 25button a:hover { 26 transform: translateY(-20px); 27} 28 29button a::before { 30 content: ''; 31 position: absolute; 32 top: 0; 33 left: 0; 34 width: 50px; 35 height: 100%; 36 background-color: rgba(255, 255, 255, 0.5); 37 transform: skewX(45deg) translateX(150px); 38 transition: 0.5s ease; 39} 40 41button a:hover::before { 42 transform: skewX(45deg) translateX(-150px); 43} 44 45button a svg { 46 width: 3em; 47} 48 49#facebook { 50 color: rgba(10, 128, 236, 0.7); 51}
1.2K views
1.2K views
MIT License