<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tab Bar Animation CSS Only
</title>
</head>
<body>
<h1 style="color: white">😎 Tab Bar Animation CSS Only</h1>
<!-- With Icons -->
<div class="tab-bar">
<a class="tab" href="#" data-text="Home">
<span class="icon"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNNDIsNDhIMjhWMzVoLTh2MTNINlYyN2MwLTAuNTUyLDAuNDQ3LTEsMS0xczEsMC40NDgsMSwxdjE5aDEwVjMzaDEydjEzaDEwVjI4YzAtMC41NTIsMC40NDctMSwxLTFzMSwwLjQ0OCwxLDFWNDh6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik00NywyN2MtMC4yNDksMC0wLjQ5Ny0wLjA5Mi0wLjY5MS0wLjI3N0wyNCw1LjM4NEwxLjY5MSwyNi43MjNjLTAuMzk5LDAuMzgxLTEuMDMyLDAuMzY4LTEuNDE0LTAuMDMxICAgICBjLTAuMzgyLTAuMzk5LTAuMzY3LTEuMDMyLDAuMDMxLTEuNDE0TDI0LDIuNjE2bDIzLjY5MSwyMi42NjFjMC4zOTgsMC4zODIsMC40MTMsMS4wMTUsMC4wMzEsMS40MTQgICAgIEM0Ny41MjYsMjYuODk2LDQ3LjI2NCwyNyw0NywyN3oiLz48L2c+PGc+PHBhdGggZD0iTTM5LDE1Yy0wLjU1MywwLTEtMC40NDgtMS0xVjhoLTZjLTAuNTUzLDAtMS0wLjQ0OC0xLTFzMC40NDctMSwxLTFoOHY4QzQwLDE0LjU1MiwzOS41NTMsMTUsMzksMTV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+" alt=""></span>
</a>
<a class="tab" href="#" data-text="Like">
<span class="icon"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48cGF0aCBkPSJNMjQsNDcuMDAxYy0wLjE3MywwLTAuMzQ2LTAuMDQ1LTAuNTAxLTAuMTM1Yy0wLjIzOS0wLjEzOC01LjkxMy0zLjQ0Ny0xMS42NzgtOC43NzhDMy45NzcsMzAuODM1LDAsMjMuNjY4LDAsMTYuNzg3ICAgIGMwLTkuMjc1LDYuMjc5LTEzLjUsMTIuMTEzLTEzLjVjNC40OTksMCw5LjUzLDIuNTcyLDExLjg4Nyw4LjIyOWMyLjM1Ny01LjY1Nyw3LjM4OS04LjIyOSwxMS44ODctOC4yMjkgICAgQzQxLjcyMSwzLjI4Nyw0OCw3LjUxMiw0OCwxNi43ODdjMCw2Ljg4MS0zLjk3NywxNC4wNDgtMTEuODIxLDIxLjMwMWMtNS43NjUsNS4zMzEtMTEuNDM5LDguNjQxLTExLjY3OCw4Ljc3OCAgICBDMjQuMzQ2LDQ2Ljk1NiwyNC4xNzMsNDcuMDAxLDI0LDQ3LjAwMXogTTEyLjExMyw1LjI4N0M3LjI0Miw1LjI4NywyLDguODg2LDIsMTYuNzg3QzIsMzAuNjUsMjAuNjc0LDQyLjc4MywyNCw0NC44MzMgICAgYzMuMzIzLTIuMDUxLDIyLTE0LjE5MywyMi0yOC4wNDZjMC03LjkwMS01LjI0Mi0xMS41LTEwLjExMy0xMS41Yy00LjQ3MywwLTkuNTgsMy4wNjItMTAuOTA1LDkuOTAzQzI0Ljg5MSwxNS42NiwyNC40NzksMTYsMjQsMTYgICAgcy0wLjg5MS0wLjM0LTAuOTgyLTAuODFDMjEuNjkzLDguMzUsMTYuNTg2LDUuMjg3LDEyLjExMyw1LjI4N3oiLz48L2c+PC9nPjwvc3ZnPg==" alt=""></span>
</a>
<a class="tab" href="#" data-text="Extra">
<span class="icon"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNOC40NDMsNDAuNTU4Yy0wLjI1NiwwLTAuNTEzLTAuMDk4LTAuNzA4LTAuMjk0Yy0xLjE2Ny0xLjE3LTEuMTY3LTMuMDczLDAtNC4yNDNjMS4xNzMtMS4xNjgsMy4wNzctMS4xNjcsNC4yNDQsMC4wMDEgICAgIGMwLjM5LDAuMzksMS4wMjUsMC4zODksMS40MTUtMC4wMDFjMC4zODktMC4zODksMC4zODktMS4wMjQtMC4wMDEtMS40MTRjLTAuNTY3LTAuNTY2LTAuODc5LTEuMzItMC44NzktMi4xMjIgICAgIGMwLTAuODAyLDAuMzEyLTEuNTU1LDAuODgtMi4xMjFjMS4xMy0xLjEzMSwzLjEwOC0xLjEzMiw0LjI0MSwwLjAwMWMwLjM3NywwLjM3NywxLjAzNiwwLjM3OSwxLjQxNCwwICAgICBjMC4zOS0wLjM5LDAuMzktMS4wMjQsMC0xLjQxNGMtMS4xNjgtMS4xNy0xLjE2OC0zLjA3MywwLTQuMjQzYzEuMTMyLTEuMTMzLDMuMTA5LTEuMTM0LDQuMjQzLTAuMDAxICAgICBDMjMuNDgzLDI0Ljg5NiwyMy43MzQsMjUsMjQsMjVjMCwwLDAsMCwwLDBjMC4yNjcsMCwwLjUxOC0wLjEwNCwwLjcwNy0wLjI5M2MwLjE4OS0wLjE4OSwwLjI5My0wLjQzOSwwLjI5My0wLjcwNyAgICAgYzAtMC4yNjctMC4xMDQtMC41MTgtMC4yOTMtMC43MDdjLTAuNTY3LTAuNTY2LTAuODgtMS4zMi0wLjg4LTIuMTIzYzAtMC44MDEsMC4zMTMtMS41NTQsMC44OC0yLjExOSAgICAgYzAuNTY2LTAuNTY2LDEuMzItMC44NzksMi4xMjEtMC44NzljMC4wMDEsMCwwLjAwMSwwLDAuMDAyLDBjMC44MDEsMC4wMDEsMS41NTQsMC4zMTMsMi4xMiwwLjg4MSAgICAgYzAuMzksMC4zODgsMS4wMjUsMC4zODgsMS40MTUtMC4wMDJzMC4zOS0xLjAyNCwwLTEuNDE1Yy0wLjU2Ni0wLjU2NS0wLjg3OC0xLjMxOS0wLjg3OC0yLjEyMWMwLTAuODAxLDAuMzEyLTEuNTU1LDAuODc5LTIuMTIxICAgICBjMS4xMzItMS4xMzMsMy4xMDgtMS4xMzQsNC4yNDItMC4wMDFjMC4zOTEsMC4zOTIsMS4wMjUsMC4zODksMS40MTUsMC4wMDFjMC4xODktMC4xODksMC4yOTMtMC40NCwwLjI5My0wLjcwNyAgICAgYzAtMC4yNjctMC4xMDQtMC41MTctMC4yOTMtMC43MDVjLTEuMTY5LTEuMTcyLTEuMTY5LTMuMDc1LTAuMDAxLTQuMjQ1YzEuMTczLTEuMTY4LDMuMDc2LTEuMTY4LDQuMjQ0LDAuMDAxICAgICBjMC4zOSwwLjM5MiwwLjM5LDEuMDI0LTAuMDAxLDEuNDE1Yy0wLjM5MSwwLjM5LTEuMDI0LDAuMzg5LTEuNDE0LTAuMDAxYy0wLjM5LTAuMzkxLTEuMDI0LTAuMzkxLTEuNDE2LDAgICAgIGMtMC4zODgsMC4zODktMC4zODgsMS4wMjQsMC4wMDIsMS40MTZjMC41NjUsMC41NjQsMC44NzgsMS4zMTYsMC44NzksMi4xMThjMCwwLjgwMS0wLjMxMiwxLjU1NS0wLjg3OSwyLjEyMiAgICAgYy0xLjEzMywxLjEzMy0zLjEwOSwxLjEzMy00LjI0MiwwYy0wLjM3Ny0wLjM3Ni0xLjAzNi0wLjM4LTEuNDE0LDBjLTAuMTg5LDAuMTg5LTAuMjkzLDAuNDQtMC4yOTMsMC43MDcgICAgIGMwLDAuMjY4LDAuMTA0LDAuNTE4LDAuMjkyLDAuNzA2YzEuMTcsMS4xNzIsMS4xNywzLjA3NSwwLDQuMjQ0Yy0xLjE2OSwxLjE3LTMuMDczLDEuMTctNC4yNDMsMC4wMDIgICAgIGMtMC4xOS0wLjE5LTAuNDQtMC4yOTUtMC43MDctMC4yOTVjMCwwLDAsMC0wLjAwMSwwYy0wLjI2NywwLTAuNTE4LDAuMTA0LTAuNzA4LDAuMjk0Yy0wLjE4OSwwLjE4OC0wLjI5MywwLjQzOC0wLjI5MywwLjcwNSAgICAgYzAsMC4yNjgsMC4xMDQsMC41MTksMC4yOTMsMC43MDdjMC41NjcsMC41NjcsMC44NzksMS4zMjEsMC44NzksMi4xMjJjMCwwLjgwMi0wLjMxMiwxLjU1Ni0wLjg3OSwyLjEyMiAgICAgQzI1LjU1NSwyNi42ODgsMjQuODAyLDI3LDI0LjAwMSwyN2MwLDAsMCwwLTAuMDAxLDBjLTAuODAxLDAtMS41NTQtMC4zMTItMi4xMjEtMC44NzljLTAuMzc3LTAuMzc3LTEuMDM3LTAuMzc5LTEuNDE0LDAgICAgIGMtMC4zOSwwLjM5LTAuMzksMS4wMjUsMCwxLjQxNWMwLjU2NiwwLjU2NiwwLjg3OCwxLjMyLDAuODc4LDIuMTIxcy0wLjMxMiwxLjU1NS0wLjg3OSwyLjEyMWMtMS4xMzIsMS4xMzMtMy4xMDksMS4xMzMtNC4yNDIsMCAgICAgYy0wLjM3Ny0wLjM3Ny0xLjAzNi0wLjM3OS0xLjQxNCwwYy0wLjE5LDAuMTg5LTAuMjk0LDAuNDM5LTAuMjk0LDAuNzA2YzAsMC4yNjgsMC4xMDQsMC41MTksMC4yOTMsMC43MDcgICAgIGMxLjE2OSwxLjE3MSwxLjE2OSwzLjA3NCwwLjAwMSw0LjI0NGMtMS4xNzEsMS4xNjctMy4wNzQsMS4xNjgtNC4yNDMsMC4wMDFjLTAuMzkxLTAuMzkzLTEuMDI1LTAuMzkyLTEuNDE3LTAuMDAxICAgICBjLTAuMzg4LDAuMzg5LTAuMzg4LDEuMDI0LDAuMDAyLDEuNDE2YzAuMzksMC4zOTEsMC4zODksMS4wMjQtMC4wMDIsMS40MTRDOC45NTUsNDAuNDYsOC42OTksNDAuNTU4LDguNDQzLDQwLjU1OHoiLz48L2c+PGc+PHBhdGggZD0iTTkuODU4LDQ1LjE0M2MtMS44NywwLTMuNjI4LTAuNzI4LTQuOTUtMi4wNWMtMi43MjktMi43MjktMi43MjktNy4xNywwLTkuODk5TDMzLjE5Miw0LjkwOSAgICAgYzEuMzIyLTEuMzIyLDMuMDgtMi4wNSw0Ljk1LTIuMDVzMy42MjgsMC43MjgsNC45NSwyLjA1YzIuNzI5LDIuNzI5LDIuNzI5LDcuMTcsMCw5Ljg5OUwxNC44MDgsNDMuMDkzICAgICBDMTMuNDg2LDQ0LjQxNSwxMS43MjgsNDUuMTQzLDkuODU4LDQ1LjE0M3ogTTM4LjE0Miw0Ljg1OWMtMS4zMzYsMC0yLjU5MSwwLjUyLTMuNTM2LDEuNDY0TDYuMzIyLDM0LjYwNyAgICAgYy0xLjk0OSwxLjk0OS0xLjk0OSw1LjEyMiwwLDcuMDcxYzAuOTQ0LDAuOTQ0LDIuMiwxLjQ2NCwzLjUzNiwxLjQ2NHMyLjU5MS0wLjUyLDMuNTM2LTEuNDY0bDI4LjI4NC0yOC4yODQgICAgIGMxLjk0OS0xLjk0OSwxLjk0OS01LjEyMiwwLTcuMDcxQzQwLjczMyw1LjM3OSwzOS40NzgsNC44NTksMzguMTQyLDQuODU5eiIvPjwvZz48Zz48cGF0aCBkPSJNMTcuNzM2LDQ3Ljg1MmMtMC4wMTgsMC0wLjAzNiwwLTAuMDU0LDBjLTIuNTI4LTAuMDE3LTQuOTQxLTEuMTMtNi45NzctMy4yMTlsMS40MzMtMS4zOTYgICAgIGMxLjY1NCwxLjY5OCwzLjU3NSwyLjYwMiw1LjU1NywyLjYxNWMxLjgwNiwwLjAyNSwzLjU3Ni0wLjczNiw0Ljg5MS0yLjA1MmwyMS4yMTMtMjEuMjEzYzIuMjQtMi4yNCwzLjQzMy02LjMzNS0wLjU3OS0xMC41ICAgICBsMS40NC0xLjM4N2M0LjY5NSw0Ljg3NCwzLjY2MSwxMC4xOTIsMC41NTIsMTMuMzAxTDI0LDQ1LjIxNEMyMi4zMjIsNDYuODkyLDIwLjA0Miw0Ny44NTIsMTcuNzM2LDQ3Ljg1MnoiLz48L2c+PGc+PHBhdGggZD0iTTQuMDYxLDM3LjYwMWMtMC4yNiwwLTAuNTE5LTAuMTAxLTAuNzE1LTAuMzAxYy00LjcwOC00LjgxMy0zLjU4OS0xMC4yNjktMC41NTktMTMuMjk5TDI0LjAwMSwyLjc4NyAgICAgYzMuNzA4LTMuNzA3LDguNjg1LTMuNTE5LDEzLjMxMiwwLjUwNWMwLjQxNywwLjM2MiwwLjQ2MSwwLjk5NCwwLjA5OSwxLjQxMXMtMC45OTQsMC40NTktMS40MTEsMC4wOTkgICAgIGMtMy44MDItMy4zMDctNy42NjEtMy41MjUtMTAuNTg2LTAuNjAxTDQuMjAxLDI1LjQxNWMtMi40MzYsMi40MzctMy4yMDMsNi42MjMsMC41NzQsMTAuNDg2ICAgICBjMC4zODYsMC4zOTUsMC4zNzksMS4wMjgtMC4wMTYsMS40MTRDNC41NjUsMzcuNTA2LDQuMzEzLDM3LjYwMSw0LjA2MSwzNy42MDF6Ii8+PC9nPjwvZz48L2c+PC9zdmc+" alt=""></span>
</a>
<a class="tab" href="#" data-text='Extra'>
<span class="icon"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNMjQuMDQyLDMwYy03LjE0NSwwLTEyLjk1OC02LjcyOS0xMi45NTgtMTVTMTYuODk2LDAsMjQuMDQyLDBDMzEuMTg3LDAsMzcsNi43MjksMzcsMTVTMzEuMTg3LDMwLDI0LjA0MiwzMHogTTI0LjA0MiwyICAgICBjLTYuMDQyLDAtMTAuOTU4LDUuODMyLTEwLjk1OCwxM3M0LjkxNiwxMywxMC45NTgsMTNTMzUsMjIuMTY4LDM1LDE1UzMwLjA4NCwyLDI0LjA0MiwyeiIvPjwvZz48Zz48cGF0aCBkPSJNNDcuOTgyLDQ4SDAuMDE5di02Ljc3MWMwLTIuOTUxLDEuODY3LTUuNjAxLDQuNjQ1LTYuNTkyTDE3LDMxLjIzOHYtNC4xNTVoMnY1LjY3OWwtMTMuNzM1LDMuNzggICAgIGMtMS45MTMsMC42ODctMy4yNDcsMi41NzktMy4yNDcsNC42ODdWNDZoNDMuOTY0di00Ljc3MWMwLTIuMTA3LTEuMzMzLTQtMy4zMTktNC43MDlMMjksMzIuNzYydi01LjYzN2gydjQuMTEzbDEyLjI2NSwzLjM3NiAgICAgYzIuODUsMS4wMTUsNC43MTcsMy42NjMsNC43MTcsNi42MTRWNDh6Ii8+PC9nPjxnPjxwYXRoIGQ9Ik0zMi43OTksMTMuMjE4Yy0wLjA2OCwwLTAuMTM2LTAuMDAxLTAuMjA1LTAuMDA0Yy0yLjI1MS0wLjA4Mi00Ljg3NS0xLjUwNi02LjU0Mi0zLjQzMSAgICAgYy0xLjE2NiwxLjQ4Ni0yLjgzMSwyLjQ0Mi00Ljg5MiwyLjc5MmMtMy42MDUsMC42MTktNy43MjgtMC43NjUtOC45ODItMS45ODJsMS4zOTMtMS40MzZjMC42MDQsMC41ODcsNC4wMzUsMS45OTQsNy4yNTQsMS40NDYgICAgIGMxLjk5OC0wLjMzOSwzLjQzOC0xLjM2Niw0LjI4LTMuMDUxbDAuODM2LTEuNjcxbDAuOTI3LDEuNjIyYzEuMTA3LDEuOTM4LDMuNzYzLDMuNjM3LDUuOCwzLjcxMiAgICAgYzAuOTA2LDAuMDI0LDEuNTUtMC4yNDcsMS45NjEtMC44NTdsMS42NTksMS4xMTdDMzUuNTI4LDEyLjYwNCwzNC4yOTUsMTMuMjE4LDMyLjc5OSwxMy4yMTh6Ii8+PC9nPjwvZz48L2c+PC9zdmc+" alt=""></span>
</a>
</div>
<!-- With Alphabets -->
<div class="tab-bar">
<a class="tab" href="#" data-text="Home">
<span class="icon">A</span>
</a>
<a class="tab" href="#" data-text="Like">
<span class="icon">B</span>
</a>
<a class="tab" href="#" data-text="Extra">
<span class="icon">C</span>
</a>
<a class="tab" href="#" data-text='Extra'>
<span class="icon">D</span>
</a>
</div>
<div class="tab-bar radius">
<a class="tab" href="#" data-text="Home">
<span class="icon">A</span>
</a>
<a class="tab" href="#" data-text="Like">
<span class="icon">B</span>
</a>
<a class="tab selected" href="#" data-text="Extra">
<span class="icon">C</span>
</a>
<a class="tab" href="#" data-text='Extra'>
<span class="icon">D</span>
</a>
</div>
<div class="tab-bar radius border">
<a class="tab" href="#" data-text="Home">
<span class="icon">A</span>
</a>
<a class="tab" href="#" data-text="Like">
<span class="icon">B</span>
</a>
<a class="tab" href="#" data-text="Extra">
<span class="icon">C</span>
</a>
<a class="tab" href="#" data-text='Extra'>
<span class="icon">D</span>
</a>
</div>
</body>
</html>@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
body, html {
font-family: 'Quicksand', sans-serif;
background: #5fef8d;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
$font-size: 12px;
$time: 0.3s;
$border: 1px;
$border-radius: 5px;
$border-color: #5fef8d;
$chip-color: #607D8B;
$morph-chip-color: #5fef8d;
$selected-bg: rgba(0,0,0,0.1);
@mixin border() {
border: $border solid $border-color;
border-right: none;
&:last-child {
border-right: $border solid $border-color;
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
&:first-child {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
}
.radius {
border-radius: $border-radius;
.tab:active::before {
border-radius: $border-radius !important;
}
}
.border .tab {
@include border();
&:active::before {
border-radius: inherit !important;
}
}
.tab-bar {
background-color: white;
padding: 5px;
box-shadow: 1px 4px 20px rgba(0,0,0,0.2);
display: flex;
margin: 10px;
color: black;
.tab {
box-sizing: border-box;
text-decoration: none;
color: inherit;
width: 70px;
height: 70px;
background: inherit;
padding: 5px;
display: inherit;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
transition: all $time;
&::before {
position: absolute;
content: "";
width: 26%;
height: 13%;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
border-bottom: none;
background-color: $chip-color;
bottom: -8px;
opacity: 0;
transition: all $time ease-in-out;
}
&:active::before {
width: 100%;
height: 100%;
background-color: $morph-chip-color;
border-radius: 0;
}
&:hover::before {
opacity: 1;
bottom: 0px;
}
&::after {
content: attr(data-text);
position: absolute;
top: 0;
width: 100%;
text-align: center;
color: inherit;
font-size: $font-size;
opacity: 0;
transition: all $time ease-in-out;
}
&:hover {
&::after {
opacity: 1;
top: 6px;
}
padding-top: 15px;
}
&.selected {
background-color: $selected-bg;
border-radius: inherit;
&::after {
opacity: 1;
top: 6px;
}
&::before {
opacity: 1;
bottom: 0px;
}
padding-top: 15px;
}
.icon {
color: inherit;
z-index: 10;
font-size: 2*$font-size;
display: inherit;
img {
margin: auto;
height: 2*$font-size;
}
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.