<a class="arrow-down-close" onclick="openDropdown(this)">
body {
background-color: #008789;
transition: 300ms ease-in-out background-color;
&.open {
background-color: #d12c5b;
}
}
.arrow-down-close {
width: 100px;
height: 50px;
display: block;
position: absolute;
top: 50%;
left: 50%;
&:before, &:after {
content: '';
display: inline-block;
height: 60px;
width: 10px;
background-color: white;
border-radius: 10px;
position: relative;
transition: 300ms ease-in-out transform;
}
&:before {
transform: rotate(-45deg);
left: 18px;
top: -4px;
}
&:after {
transform: rotate(45deg);
left: 40px;
top: -4px;
}
&.open {
&:before {
transform: translateX(17px) rotate(-45deg);
}
&:after {
transform: translateX(-17px) rotate(45deg);
}
}
}
View Compiled
function openDropdown(element) {
element.classList.toggle('open');
document.getElementsByTagName('body')[0].classList.toggle('open');
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.