This example creates a simple file explorer layout using Button in CSS. You can expand on this by adding hover effects, click events, and more sophisticated styling as per your requirements.
HTML
<button class="button">
<div class="container">
<div class="folder folder_one"></div>
<div class="folder folder_two"></div>
<div class="folder folder_three"></div>
<div class="folder folder_four"></div>
</div>
<div class="active_line"></div>
<span class="text">File Explorer</span>
</button>
CSS
.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 5.3em;
height: 5.3em;
border: none;
border-radius: .4em;
background: rgba(235, 252, 254, 0.8);
}
.container {
position: relative;
width: 3.5em;
height: 3.1em;
background: none;
overflow: hidden;
}
.folder {
content: '';
position: absolute;
/* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
}
.folder_one {
bottom: 0;
width: 100%;
height: 88%;
border-radius: 3px;
border-top: 2px solid rgb(206, 167, 39);
/* background-color: rgb(252, 212, 80); */
background: linear-gradient(
-35deg,
rgb(238, 194, 47) 5%,
rgb(255, 223, 118));
}
.folder_two {
top: 5%;
width: 38%;
height: 19%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: rgb(206, 167, 39);
box-shadow: 0 1px 5px -2px rgba(0, 0, 0, .5);
}
.folder_two::before {
content: '';
position: absolute;
display: inline;
left: 88%;
width: 0;
height: 0;
border-left: 7px solid rgb(206, 167, 39);
border-top: .3em solid transparent;
border-bottom: .3em solid transparent;
/* background-color: rgb(206, 167, 39); */
}
.folder_three {
display: flex;
align-items: center;
justify-content: center;
left: .5em;
bottom: 0;
width: 2.5em;
height: .9em;
border-radius: 4px 4px 0 0;
background: linear-gradient(
-35deg,
rgb(25, 102, 218),
rgb(109, 165, 249));
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.folder_four {
left: 1em;
bottom: .3em;
width: 1.5em;
height: .18em;
border-radius: 1em;
background-color: rgb(20, 77, 163);
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.active_line {
content: '';
position: absolute;
bottom: 0;
width: .9em;
height: .4em;
background-color: #999;
border: none;
border-radius: 1em;
transition: all .15s linear;
}
.button:active .active_line,
.button:focus .active_line {
width: 2.3em;
background-color: rgb(41, 126, 255);
}
.button:focus .container {
animation: wow 1s forwards;
}
@keyframes wow {
20% {
scale: .8;
}
30% {
scale: 1;
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
65% {
transform: translateY(4px);
}
80% {
transform: translateY(0);
}
100% {
scale: 1;
}
}
.text {
content: '';
position: absolute;
top: -4.5em;
width: 7.7em;
height: 2.6em;
background-color: #666;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 5px;
text-shadow: 0 0 10px rgb(0, 0, 0);
opacity: 0;
transition: all .25s linear;
}
.button:hover .text {
opacity: 1;
}
HTML & CSS
To create a basic file explorer effect using HTML/CSS, you can build a simple structure with some styling to represent files and folders.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>File Explorer</title>
<style>
.button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 5.3em;
height: 5.3em;
border: none;
border-radius: .4em;
background: rgba(235, 252, 254, 0.8);
}
.container {
position: relative;
width: 3.5em;
height: 3.1em;
background: none;
overflow: hidden;
}
.folder {
content: '';
position: absolute;
/* box-shadow: 0 0 5px rgba(0, 0, 0, .3); */
}
.folder_one {
bottom: 0;
width: 100%;
height: 88%;
border-radius: 3px;
border-top: 2px solid rgb(206, 167, 39);
/* background-color: rgb(252, 212, 80); */
background: linear-gradient(-35deg,
rgb(238, 194, 47) 5%,
rgb(255, 223, 118));
}
.folder_two {
top: 5%;
width: 38%;
height: 19%;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
background-color: rgb(206, 167, 39);
box-shadow: 0 1px 5px -2px rgba(0, 0, 0, .5);
}
.folder_two::before {
content: '';
position: absolute;
display: inline;
left: 88%;
width: 0;
height: 0;
border-left: 7px solid rgb(206, 167, 39);
border-top: .3em solid transparent;
border-bottom: .3em solid transparent;
/* background-color: rgb(206, 167, 39); */
}
.folder_three {
display: flex;
align-items: center;
justify-content: center;
left: .5em;
bottom: 0;
width: 2.5em;
height: .9em;
border-radius: 4px 4px 0 0;
background: linear-gradient(-35deg,
rgb(25, 102, 218),
rgb(109, 165, 249));
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.folder_four {
left: 1em;
bottom: .3em;
width: 1.5em;
height: .18em;
border-radius: 1em;
background-color: rgb(20, 77, 163);
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}
.active_line {
content: '';
position: absolute;
bottom: 0;
width: .9em;
height: .4em;
background-color: #999;
border: none;
border-radius: 1em;
transition: all .15s linear;
}
.button:active .active_line,
.button:focus .active_line {
width: 2.3em;
background-color: rgb(41, 126, 255);
}
.button:focus .container {
animation: wow 1s forwards;
}
@keyframes wow {
20% {
scale: .8;
}
30% {
scale: 1;
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
65% {
transform: translateY(4px);
}
80% {
transform: translateY(0);
}
100% {
scale: 1;
}
}
.text {
content: '';
position: absolute;
top: -4.5em;
width: 7.7em;
height: 2.6em;
background-color: #666;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border: none;
border-radius: 5px;
text-shadow: 0 0 10px rgb(0, 0, 0);
opacity: 0;
transition: all .25s linear;
}
.button:hover .text {
opacity: 1;
}
</style>
</head>
<body>
<button class='button'>
<div class='container'>
<div class='folder folder_one'></div>
<div class='folder folder_two'></div>
<div class='folder folder_three'></div>
<div class='folder folder_four'></div>
</div>
<div class='active_line'></div>
<span class='text'>File Explorer</span>
</button>
</body>
</html>
THE END
No comments