Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated Sliders Icon
.options-icon
.line-container
.line
.circle
.line-container
.line
.circle
.line-container
.line
.circle
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
html, body {
display: flex;
justify-content: center;
align-items: center;
background-color: #45729A;
height: 100%;
}
.options-icon {
cursor: pointer;
width: 50px;
&:hover {
.circle, .line {
background-color: #FFF;
}
.line-container:nth-child(1) .circle {
transform: translateX(-30px);
}
.line-container:nth-child(2) .circle {
transform: translateX(30px);
}
.line-container:nth-child(3) .circle {
transform: translateX(-5px);
}
}
}
.line-container {
margin: 11px 0;
position: relative;
}
.line {
height: 4px;
background-color: #2F4C65;
border-radius: 2px;
transition: all 0.25s ease-in-out;
}
.circle {
height: 10px;
width: 10px;
position: absolute;
background-color: #2F4C65;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.25s ease-in-out;
.line-container:nth-child(1) & {
right: 5px;
}
.line-container:nth-child(2) & {
left: 5px;
}
.line-container:nth-child(3) & {
left: 50%;
margin-left: -4px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment