:Hover
- 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택된다.
https://developer.mozilla.org/ko/docs/Web/CSS/:hover
:hover - CSS: Cascading Style Sheets | MDN
:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.
developer.mozilla.org
⬇️
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Me!</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="button.css">
</head>
<body>
<button>Hover Me</button>
</body>
</html>.css
body {
font-family: 'Roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #151b29;
}
button {
background: none;
color: #ffa260;
border: 2px solid;
padding: 1em 2em;
font-size: 1em;
transition: border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s;
}
button:hover {
border-color: #f1ff5c;
color: #f1ff5c;
box-shadow: 0 0.5em 0.5em -0.4em #f1ff5c;
transform: translateY(-0.25em);
cursor: pointer;
}
'공부 기록 > HTML & CSS' 카테고리의 다른 글
| 간단한 실습(2) - Price Table (반응형 디자인과 reset CSS) (0) | 2023.01.18 |
|---|---|
| 간단한 실습(1) - Photo site (0) | 2023.01.18 |
| Form (0) | 2023.01.18 |
| Table (0) | 2023.01.18 |
| HTML 기본 구조와 Semantic Elements (0) | 2023.01.18 |
