[CSS] hover 시 올라가는 버튼 만들기

hover시 살짝 올라가는 버튼UI를 만들어보자.

 

실행 결과

 

body {
  background-color:lightgrey;
  display:flex;
  align-items:center;
  height:300px;
}

button {
  cursor: pointer;
  color: black;
  width: 300px;
  height: 30px;
  display: block;
  margin: 0 auto;
  border: solid 1px black;
  background-color: whitesmoke;
  border-radius: 5px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
}

button:hover {
   background-color: #1b273f;
    box-shadow: 0px 15px 20px rgba(27, 39, 63, 0.4);
    color: whitesmoke;
    transform: translateY(-5px);
}

See the Pen Untitled by 김현동 (@gusehd66) on CodePen.