<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');
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.