Button by misaraadel
#e8e8e8
1.socail-media { 2 display: flex; 3 align-items: center; 4 align-content: center; 5 justify-content: center; 6 gap: 20px; 7 list-style: none; 8} 9 10.socail-media li a { 11 width: 50px; 12 height: 50px; 13 background-color: #5b9d15; 14 display: flex; 15 overflow: hidden; 16 align-items: center; 17 align-content: center; 18 justify-content: center; 19 position: relative; 20 z-index: 9; 21 border: 1px solid #5b9d15; 22} 23 24.socail-media li a svg { 25 width: 24px; 26 height: 24px; 27 -o-object-fit: contain; 28 object-fit: contain; 29 filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(57deg) brightness(108%) contrast(105%); 30} 31 32.socail-media li a::after { 33 content: ""; 34 position: absolute; 35 width: 100%; 36 height: 100%; 37 -webkit-clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 38 clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 39 background-color: #fff; 40 z-index: -1; 41 top: 0; 42 left: 0; 43 opacity: 0; 44} 45 46.socail-media li a:hover::after { 47 animation: sideClip 0.5s linear; 48 -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 49 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 50 opacity: 1; 51} 52 53.socail-media li a:hover svg { 54 animation: fadeInLeft 0.3s linear both; 55 filter: invert(52%) sepia(85%) saturate(2286%) hue-rotate(54deg) brightness(92%) contrast(84%); 56} 57 58@keyframes sideClip { 59 0% { 60 clip-path: polygon(0 0, 100% 0, 0 0, 0 100%); 61 } 62 63 50% { 64 clip-path: polygon(0 0, 100% 0, 0 100%, 0 100%); 65 } 66 67 100% { 68 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); 69 } 70} 71 72@keyframes fadeInLeft { 73 from { 74 opacity: 0; 75 transform: translate3d(-100%, 0, 0); 76 } 77 78 to { 79 opacity: 1; 80 transform: none; 81 } 82} 83
1.3K views
1.3K views
MIT License