Created
October 29, 2023 15:46
-
-
Save jhorman9/6b3f5168199ac14511439c6746a97f6f to your computer and use it in GitHub Desktop.
Social media icon #5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul> | |
| <li><a href="#"><i class="fa-brands fa-instagram instagram"></i></a></li> | |
| <li><a href="#"><i class="fa-brands fa-whatsapp whatsapp"></i></a></li> | |
| <li><a href="#"><i class="fa-brands fa-twitter twitter"></i></a></li> | |
| </ul> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background: #000; | |
| } | |
| ul { | |
| position: relative; | |
| display: flex; | |
| } | |
| ul li { | |
| position: relative; | |
| list-style: none; | |
| margin: 0 20px; | |
| cursor: pointer; | |
| } | |
| ul li a { | |
| text-decoration: none; | |
| } | |
| ul li a .fa-brands { | |
| font-size: 6em; | |
| color: #222; | |
| } | |
| ul li a::before { | |
| font-family: "FontAwesome"; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| font-size: 6em; | |
| height: 0; | |
| overflow: hidden; | |
| transition: 0.5s ease-in-out; | |
| } | |
| ul li:nth-child(1) a::before { | |
| content: "\f16d"; | |
| background-image: linear-gradient(45deg, | |
| #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%, | |
| #bc1888 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| border-bottom: 4px solid #dc2743; | |
| } | |
| ul li:nth-child(2) a::before { | |
| content: "\f232"; | |
| color: #25D366; | |
| border-bottom: 4px solid #25D366; | |
| } | |
| ul li:nth-child(3) a::before { | |
| content: "\f099"; | |
| color: #1DA1F2; | |
| border-bottom: 4px solid #1DA1F2; | |
| } | |
| ul li:hover a::before { | |
| height: 100%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment