CSS로 모바일 버튼 눌림 표시/클릭 액션 스타일 (active 선택자 이용)

PC에서의 버튼은 마우스오버 효과로 hover를 준다.

 

모바일은 마우스가 없어 hover를 구현할 수 없어서, 

active 가상선택자를 이용해서 클릭될때 약간의 움직임을 주면서 눌렸다는 느낌을 준다.

 

 

 

 

소스코드

 

html

   <a href="#" class="btn purple">버튼 1</a>

 

css

.btn {
  display: inline-block;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
  border-bottom: 2px solid #ccc;
  transition: background 0.12s ease;
}
.btn:active {
  position: relative;
  top: 2px;
  margin-bottom: 2px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.42);
}

.btn {
  padding: 9px 14px 6px;
  font-size: 14px;
}

.purple:link, .purple:visited {
  background: #918CD2;
  border-bottom-color: #8480c5;
}
.purple:hover {
  background: #9993E3;
}
.purple:active {
  border-bottom: 0;
}