728x90
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.
728x90
'CSS' 카테고리의 다른 글
2021/06/24 - SCSS (0) | 2021.06.24 |
---|---|
2021/06/23- SCSS (0) | 2021.06.23 |