Hey friends,
do check out the tutorial on my YouTube channel and subscribe to support. Thanks!
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Custom Dropdown List using CSS Only| CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "poppins",sans-serif;
}
body{
display: flex;
justify-content: center;
align-items:center;
height:100vh;
background-color: white;
}
.box{
width:200px;
position: relative;
}
.btn{
width:100%;
height:35px;
cursor:pointer;
position:relative;
display:flex;
}
.btn::before{
content: 'View More';
display:flex;
align-items:center;
width:100%;
height:100%;
background-color:white;
border-radius:5px;
box-shadow: 0 0 10px rgba(0,0,0,0.62);
border:2px solid #158abd;
padding-left:1em;
background: linear-gradient(to right, white 80%, #158abd 20%);
}
.btn::after{
content:'\f062';
position: absolute;
right:0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Font Awesome 5 Free';
font-weight:700;
width:20%;
height:110%;
color:white;
transform:rotate(180deg);
transition:all .4s;
}
.btn:checked::after{
transform: rotate(0deg);
}
.list{
position: absolute;
margin-top:0.5em;
width:100%;
height:175px;
clip-path:polygon(0 0,100% 0, 0 0);
display: flex;
flex-direction:column;
transition: all .4s;
}
input:checked ~ .list{
clip-path:none;
}
.list a{
height:25%;
display:flex;
align-items: center;
padding:0.3em 0 0.3em 1em;
text-decoration: none;
margin:0.3em 0;
background: white;
color:rgb(36,36,36);
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.62);
transition: background.4s;
}
.list a:hover{
background:#158abd;
color:white;
}
</style>
<body>
<div class="box">
<input type="checkbox" name="" id="" class="btn" value="">
<div class="list">
<a href="#"><i class="fas fa-user alt"></i> Account</a>
<a href="#"><i class="fas fa-question-circle"></i> Help and Support</a>
<a href="#"><i class="fas fa-moon"></i> Theme</a>
<a href="#"><i class="fas fa-sign-out-alt"></i> Log Out</a>
</div>
</div>
</body>
</html>
Post a Comment