HomeCSS effects Social Media Icon Hover Effects Using CSS | Font Awesome Icon | bySagar Developer -September 02, 2021 0 Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a social media icon hover effects using HTML and CSS.Video Tutorial Of Social Media Icon Hover Effects Using CSS:In the video, you have seen the demo of this and I hope you love it.Source Code: index.html Icon Hover Effect - Sagar Developer style.css * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f5e7f2; } a { position: relative; margin: 1em; width: 70px; height: 70px; background: #fff; color: #242424; align-items: center; justify-content: center; text-decoration: none; display: flex; border-radius: 15%; transition: all .4s; } a::before { width: 100%; height: 100%; content: ''; top: 0; left: 0; position: absolute; border-radius: 15px; z-index: -1; transform: scale(1.1); transition: all .4s; } a:nth-child(1)::before { background: #c32aa3; } a:nth-child(2)::before { background: #25d366; } a:nth-child(3)::before { background: #1da1f2; } a:nth-child(4)::before { background: #7289da; } a:nth-child(5)::before { background: #ff0000; } a:nth-child(6)::before { background: #1da1f2; } a:hover::before { transform: translateY(10px) scaleX(0.6) scaleY(0.8); filter: blur(10px); } a:hover:nth-child(1) { color: #c32aa3; text-shadow: 0 0 30px #c32aa3; } a:hover:nth-child(2) { color: #25d366; text-shadow: 0 0 30px #25d366; } a:hover:nth-child(3) { color: #3b5998; text-shadow: 0 0 30px #3b5998; } a:hover:nth-child(4) { color: #0077b5; text-shadow: 0 0 30px #0077b5; } a:hover:nth-child(5) { color: #ff0000; text-shadow: 0 0 30px #ff0000; } a:hover:nth-child(6) { color: #1da1f2; text-shadow: 0 0 30px #1da1f2; }
Post a Comment