And also the hover and click actions are enable using the css only like given below coding, And also position of the container change based on your input clicked. you can see the code for better understanding of the concept
I hove this is very useful for website elements to showcase your content in better way. Below is the live demo is available, you can click demo button below for this live demo. And also you can download the file by clicking the download button.
Code for Pure css tab:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>simple horizontal tab pure css</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: sans-serif;
background: linear-gradient(
94deg
, #ff9800, #ff5722);
}
body .container {
width: 720px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0;
box-shadow: 0 0 100px RGBa(0, 0, 0, 0.5);
border-radius: 3px;
overflow: hidden;
}
body .container input {
display: none;
}
body .container input:checked + label {
background: #ffc107;
}
body .container input#tab1:checked ~ .line {
left: 0%;
}
body .container input#tab1:checked ~ .content-container #c1 {
opacity: 1;
}
body .container input#tab2:checked ~ .line {
left: 25%;
}
body .container input#tab2:checked ~ .content-container #c2 {
opacity: 1;
}
body .container input#tab3:checked ~ .line {
left: 50%;
}
body .container input#tab3:checked ~ .content-container #c3 {
opacity: 1;
}
body .container input#tab4:checked ~ .line {
left: 75%;
}
body .container input#tab4:checked ~ .content-container #c4 {
opacity: 1;
}
body .container label {
display: inline-block;
font-size: 16px;
height: 50px;
line-height: 50px;
width: 25%;
text-align: center;
background: #f4f4f4;
color: #555;
position: relative;
transition: 0.25s background ease;
cursor: pointer;
}
body .container label::after {
content: "";
height: 2px;
width: 100%;
position: absolute;
display: block;
background: #ccc;
bottom: 0;
opacity: 0;
left: 0;
transition: 0.25s ease;
}
body .container label:hover::after {
opacity: 1;
}
body .container .line {
position: absolute;
height: 2px;
background: #f44336;
width: 25%;
top: 48px;
left: 0;
transition: 0.25s ease;
}
body .container .content-container {
background: #eee;
position: relative;
height: 260px;
font-size: 16px;
}
body .container .content-container .content {
position: absolute;
padding: 25px;
width: 100%;
top: 0;
opacity: 0;
transition: 0.25s ease;
color: #333;
}
body .container .content-container .content h3 {
font-weight: 200;
margin: 10px 0;
}
body .container .content-container .content p {
margin: 10px 0;
}
body .container .content-container .content p, body .container .content-container .content i {
font-size: 13px;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<input type="radio" id="tab1" name="tab" checked>
<label for="tab1"><i class="fa fa-home"></i> Home</label>
<input type="radio" id="tab2" name="tab">
<label for="tab2"><i class="fa fa-user"></i> About</label>
<input type="radio" id="tab3" name="tab">
<label for="tab3"><i class="fa fa-pencil"></i> Services</label>
<input type="radio" id="tab4" name="tab">
<label for="tab4"><i class="fa fa-envelope"></i> Contact</label>
<div class="line"></div>
<div class="content-container">
<div class="content" id="c1">
<h3>Home</h3>
<p>nc interdum dignissim. Mauris pretium sodales finibus. Nullam tempus dolor ornare turpis ornare, vitae rutrum libero semper. Ut maximus ex nec orci vulputate pulvinar. .</p>
</div>
<div class="content" id="c2">
<h3>About</h3>
<p>s justo consectetur aliquam. Donec in leo vel justo suscipit blandit. Suspendisse lobortis eros orci, et luctus leo volutpat vel. Vestibulum non mauris viverra, pretium sapien ut, tristique justo. Aliquam erat volutpat. Phasellus efficitur quam nec leo finibus sodales. Phasellus sed enim</p>
</div>
<div class="content" id="c3">
<h3>Services</h3>
<p>uis nunc interdum dignissim. Mauris pretium sodales finibus. Nullam tempus dolor ornare turpis ornare, vitae rutrum libero semper. .</p>
</div>
<div class="content" id="c4">
<h3>Contact</h3>
<p>in nisi. Phasellus et massa nibh. Sed eleifend enim mauris, vitae accumsan massa tempor ut. Praesent sit amet dolor imperdiet, malesua</p>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
0 Comments