A tab bar interaction.
A Pen by Himalaya Singh on CodePen.
A tab bar interaction.
A Pen by Himalaya Singh on CodePen.
<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> --> |
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; | |
} |
<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" /> |