How we can create a smooth switchable content tab using HTML, CSS, and JS? Solution: See this CSS Smooth Content Tab With JavaScript, Gradient Overlay Tabs Hover.
Previously I have shared some tabs related programs, but it is a complete and ready to use with amazing features. Basically, nowadays website uses tabs for showing more content in less space. Suppose, we have 4 different topics to tell about on the website. If we place them in listwise like one after one, then it will take more space on the webpage. But if we place all the topics in a tab then it will cover only one item’s space.
Today you will learn to create smooth switchable tabs with gradient overlay on hover. Basically there are tabs list with 4 items, each item contains dummy titles and texts. The selected tab has a top and bottom gradient border, and when you will hover on it a gradient over will appears. Gradient over will appears in the top to bottom direction with a transition-dealy, also the tab’s heading will go upside and disappears smoothly. And the main feature of the program is when you will switch items, they have a smooth shift effect which made the program smooth switchable.
So, Today I am sharing CSS Smooth Content Tab With JavaScript. This is a content tab means you can place text, image, video, link, or anything else inside the tab. For creating this program I have used simple HTML, CSS, and JavaScript without any library. This tabs program is a good example or practice of web development, also you can use this program on your website.
If you are thinking now how this smooth switch tabs actually are, then see the preview given below.
Preview Of Tab Items With Gradient Overlay on Hover
See this video preview to getting an idea of how this tab program looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this program, then get the source code of its.
You May Like This:
CSS Smooth Content Tab With JavaScript Source Code
Before sharing source code, let’s talk about it. First I have created the main div and put 2 lists inside the div. The first list is for tab headings, and the second one is for store contents. These two lists are based on HTML <ul> & <li> tags and also I have used HTML Data-* attribute for store text which is used on hover effect.
Now using CSS, I have placed all the elements in the right place as you can see in the preview. There I have used CSS variables to store data and use it at multiple places easily. For creating the text fly effect on hover I have created content with data attribute, which I have created in the HTML file. I have used many CSS commands like transform, transition, position, etc.
JavaScript handling here the switch feature of the program. First JavaScript fetching the elements using document.querySelectorAll command and adding and removing class name according to action. For add and remove class I have used classList command (info). There are many more things but I can’t explain all in writing, you will understand after getting the codes.
For creating this program you have to create 3 files. The first file is for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Tabs With Gradient | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="tabs"> <ul class="tabLinks"> <li> <button class="singleLink"> <span class="linkText" data-text="#1 Tab">#1 Tab</span> </button> </li> <li> <button class="singleLink"> <span class="linkText" data-text="#2 Tab">#2 Tab</span> </button> </li> <li> <button class="singleLink"> <span class="linkText" data-text="#3 Tab">#3 Tab</span> </button> </li> <li> <button class="singleLink"> <span class="linkText" data-text="#4 Tab">#4 Tab</span> </button> </li> </ul> <ul class="TabContents"> <li> <div class="insideContent"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Felis eget nunc lobortis mattis aliquam faucibus purus in. </div> </li> <li> <div class="insideContent"> Praesent tristique magna sit amet purus gravida quis. Amet luctus venenatis lectus magna fringilla urna porttitor. Varius duis at consectetur lorem donec massa sapien faucibus. Lacus laoreet non curabitur gravida arcu ac tortor dignissim.Mauris augue neque gravida in fermentum et. </div> </li> <li> <div class="insideContent"> Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Diam volutpat commodo sed egestas egestas fringilla. A cras semper auctor neque vitae. Nulla facilisi morbi tempus iaculis urna id. Ornare lectus sit amet est placerat. Ultricies leo integer malesuada nunc vel risus commodo viverra. </div> </li> <li> <div class="insideContent"> Id neque aliquam vestibulum morbi blandit. Et pharetra pharetra massa massa. Fames ac turpis egestas maecenas pharetra convallis posuere morbi leo. Quisque non tellus orci ac auctor. Euismod elementum nisi quis eleifend quam adipiscing. Ut tristique et egestas quis ipsum suspendisse. </div> </li> </ul> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url("https://fonts.googleapis.com/css?family=Lato:400,300"); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } .tabs { --links-height: 80px; --links-background: linear-gradient(135deg, #e5eaf1 0%, #b9c5d8 100%); --links-overlay: linear-gradient(135deg, #FF512F 0%,#EB3349 48%,#F45C43 100%); --Sllink-background: linear-gradient(90deg,transparent 70%,rgba(255, 255, 255, 0.2) 100%); width: 100%; max-width: 600px; min-width: 300px; font-family: Lato, sans-serif; } .tabs .tabLinks { margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; height: var(--links-height); background: var(--links-background); list-style-type: none; } @media screen and (max-width: 750px) { .tabs .tabLinks { height: calc(var(--links-height) / 2); } } .tabs .tabLinks li { flex: 1; } .tabs .tabLinks li .singleLink { all: unset; position: relative; height: var(--links-height); width: 100%; background: var(--Sllink-background); cursor: pointer; overflow: hidden; transition: 0.3s; } @media screen and (max-width: 750px) { .tabs .tabLinks li .singleLink { height: calc(var(--links-height) / 2); font-size: 12px; } } .tabs .tabLinks li .singleLink::before { position: absolute; content: ""; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: var(--links-overlay); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; transition: 0.3s ease-in-out; } .tabs .tabLinks li .singleLink .linkText { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: 0.5s; } .tabs .tabLinks li .singleLink .linkText::before { position: absolute; content: attr(data-text); top: 160%; z-index: -1; font-size: 40px; font-weight: 600; color: white; opacity: 0.1; transition: 1.2s ease-out; } @media screen and (max-width: 750px) { .tabs .tabLinks li .singleLink .linkText::before { display: none; } } .tabs .tabLinks li .singleLink:hover::before { -webkit-transform: scaleY(1); transform: scaleY(1); } .tabs .tabLinks li .singleLink:hover .linkText { color: white; opacity: 1; } .tabs .tabLinks li .singleLink:hover .linkText::before { -webkit-transform: translateY(-300%); transform: translateY(-300%); } .tabs .tabLinks li .singleLink.active { -webkit-transform: scaleY(1.4); transform: scaleY(1.4); background: white; } .tabs .tabLinks li .singleLink.active::before { -webkit-transform: scaleY(0.05); transform: scaleY(0.05); } .tabs .tabLinks li .singleLink.active .linkText { -webkit-transform: scaleY(0.714); transform: scaleY(0.714); } .tabs .tabLinks li .singleLink.active .linkText, .tabs .tabLinks li .singleLink.active:hover .linkText { background: var(--links-overlay); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; } .tabs .TabContents { position: relative; margin-top: 0; padding: 40px 60px; background: white; list-style-type: none; transition: 1s; } .tabs .TabContents::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 5px; background: var(--links-overlay); } .tabs .TabContents .insideContent { display: none; min-height: 200px; font-weight: 300; line-height: 1.8; opacity: 0; -webkit-transform: translateY(30%); transform: translateY(30%); -webkit-animation: fadeIn 0.6s forwards; animation: fadeIn 0.6s forwards; } .tabs .TabContents .insideContent.active { display: block; } @-webkit-keyframes fadeIn { to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } |
function.js
The last step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Code By Webdevtrick ( https://webdevtrick.com ) var tabLinks = document.querySelectorAll(".singleLink"); var tabContents = document.querySelectorAll(".insideContent"); tabLinks[0].classList.add("active"); tabContents[0].classList.add("active"); tabLinks.forEach(function (tabLink, i) { tabLink.addEventListener("click", function () { tabLinks.forEach(function (tabLink) { return tabLink.classList.remove("active"); }); tabContents.forEach(function (tabContent) { return tabContent.classList.remove("active"); }); tabLink.classList.add("active"); tabContents[i].classList.add("active"); }); }); |
That’s It. Now you have successfully created CSS Smooth Content Tab With JavaScript, Gradient Overlay Tabs Hover. If you like this then get the source code of its.
Thanks For Visiting, Keep Visiting.
