[2015.12.16] Dropdown button :: Pure CSS - 순수 css 로만 구현된 드랍다운 버튼, 구현방법

깔끔하고 시선을 끌 수 있을만한 드롭다운 버튼 디자인이네요.

오늘은 자바스크립트 없이 순수 css 만으로 dropdown 버튼을 구현하는 key point 에 대해서 짚고 넘어가봅시다.

소스중에서 핵심은 이부분인데요~

.btn .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #FFFFFF;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.btn:focus .dropdown, .btn:active .dropdown {
  -webkit-transform: translate(0, 20px);
          transform: translate(0, 20px);
  opacity: 1;
  visibility: visible;
}

​

'opacity: 0' 과 'visibility: hidden' 에서 btn:active(버튼이 눌러져있는 순간), btn:focus(버튼에게 포커스가 가 있는 동안) 인 경우 각각 '1, visible'로 바뀐거 보이시나요?

알고나니 별거 아니네요 뭐.ㅋㅋㅋ

애니메이션 되는 효과는 keyframe을 이용하여 구현했는데 keyframe은 다음 기회에 자세히 다뤄보도록 하겠습니다..

간단한 사용 예제 및 Demo

See the Pen Dropdown Button :: Pure CSS by Andy Tran (@andytran) on CodePen.