A tab bar interaction.
A Pen by Himalaya Singh on CodePen.
Created
February 17, 2024 04:16
-
-
Save Ashon-G/a3d49d9fbe8271f39bfb044fb9b19f06 to your computer and use it in GitHub Desktop.
Cred App Like Tab Bar Interaction
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
| <nav> | |
| <a href="#"> | |
| <i class="fas fa-home"></i> | |
| <b>home</b> | |
| </a> | |
| <a href="#"> | |
| <i class="far fa-credit-card"></i> | |
| <b>cards</b> | |
| </a> | |
| <a href="#"> | |
| <i class="fas fa-award"></i> | |
| <b>lifestyle</b> | |
| </a> | |
| <span></span> | |
| </nav> | |
| <!-- <a href="https://www.youtube.com/channel/UC7hSS_eujjZOEQrjsda76gA/videos" target="_blank" id="ytd-url">My YouTube Channel</a> --> |
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
| body { | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| margin: 0; | |
| } | |
| nav { | |
| position: relative; | |
| display: block; | |
| background-color: #f6f9ff; | |
| padding: 10px; | |
| border-radius: 40px; | |
| transform: scale(1.8); | |
| overflow: hidden; | |
| } | |
| nav a { | |
| position: relative; | |
| text-decoration: none; | |
| color: #53588b; | |
| font-family: Verdana, Geneva, Tahoma, sans-serif; | |
| font-size: 12px; | |
| line-height: 1; | |
| text-align: center; | |
| display: inline-block; | |
| width: 100px; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| z-index: 2; | |
| } | |
| nav a b { | |
| position: relative; | |
| top: 40px; | |
| transition: 0.3s ease top; | |
| } | |
| nav a i { | |
| position: relative; | |
| left: 25%; | |
| transition: 0.3s ease left; | |
| } | |
| nav span { | |
| position: absolute; | |
| width: 100px; | |
| background-color: #e5eeff; | |
| top: 10px; | |
| bottom: 10px; | |
| left: 10px; | |
| border-radius: 50px; | |
| z-index: 1; | |
| transition: 0.3s ease left; | |
| } | |
| nav a:hover b { | |
| top: 0; | |
| } | |
| nav a:hover i { | |
| left: 0; | |
| } | |
| nav a:nth-child(1):hover ~ span { | |
| left: 10px; | |
| } | |
| nav a:nth-child(2):hover ~ span { | |
| left: 114px; | |
| } | |
| nav a:nth-child(3):hover ~ span { | |
| left: 218px; | |
| } | |
| #ytd-url { | |
| display: block; | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| padding: 10px 14px; | |
| margin: 20px; | |
| color: #fff; | |
| font-family: Arial; | |
| font-size: 14px; | |
| text-decoration: none; | |
| background-color: #53588b; | |
| border-radius: 4px; | |
| box-shadow: 0 10px 20px -5px rgba(83, 88, 139, 0.3); | |
| z-index: 125; | |
| } |
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/5.11.2/css/fontawesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment