Skip to content

Instantly share code, notes, and snippets.

@chenbin-353549444

chenbin-353549444/hover-icons-mac-os-min-max-close.markdown

Created March 20, 2019 00:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chenbin-353549444/4d07c0e97df0c5e4d6f5d7fb33347157 to your computer and use it in GitHub Desktop.
Save chenbin-353549444/4d07c0e97df0c5e4d6f5d7fb33347157 to your computer and use it in GitHub Desktop.
Download ZIP
Hover Icons[mac os - min, max, close]
Raw
hover-icons-mac-os-min-max-close.markdown

Hover Icons[mac os - min, max, close]

Again a simple pen by me, this one is inspired from mac os min, max and close buttons

A Pen by Dev Loop on CodePen.

License.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Mac Buttons</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="btn btn1"></div>
<div class="btn btn2"></div>
<div class="btn btn3"></div>
</div>
</body>
</html>
Raw
style.css
body{
padding: 0;
margin: 0;
background: #1E1E22;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.btn{
height: 50px;
width: 50px;
margin: 20px;
border-radius: 50%;
cursor: pointer;
}
.btn1{
background: #fac536;
position: relative;
overflow: hidden;
}
.btn1::before{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 10%;
opacity: 0;
background: #222;
transition: 300ms;
}
.btn1:hover::before{
opacity: 1;
top: 50%;
}
.btn2{
background: #39ea49;
position: relative;
overflow: hidden;
}
.btn2::before{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%);
width: 45%;
height: 45%;
opacity: 0;
background: #222;
transition: 300ms;
}
.btn2::after{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 15%;
height: 80%;
opacity: 0;
background: #39ea49;
transition: 300ms;
}
.btn2:hover::before, .btn2:hover::after{
opacity: 1;
top: 50%;
}
.btn3{
background: #f25056;
position: relative;
overflow: hidden;
}
.btn3::before{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: 15%;
height: 50%;
opacity: 0;
background: #222;
transition: 300ms;
}
.btn3::after{
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
width: 15%;
opacity: 0;
height: 50%;
background: #222;
transition: 300ms;
}
.btn3:hover::before, .btn3:hover::after{
opacity: 1;
top: 50%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment