Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

.navigation {
  width: 60px;
  height: 60px;
  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 100%;
  border: none;
  background-color: #ffffff;
  cursor: pointer;
  transition: all .2s ease-in-out;

  &:hover {
    background-color: #ffca00;
    svg {
      fill: #ffffff;
    }
  }

  &:focus {
    transform: scale(0.75);
    outline: none;
  }

  &:active {
    transform: scale(0.75);
    outline: none;
  }

  svg {
    fill: #162B39;
    width: 24px;
    vertical-align: middle;
  }
}