디자인 요소 확인
반짝이는 마우스오버 버튼 효과
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>버튼 효과</title>
<style>
/* 전체적인 레이아웃 설정 */
.container {
flex: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
background: rgb(9, 8, 25);
}
/* 카드 디자인 설정 */
.card {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
background: linear-gradient(rgba(25, 31, 50, 0.2), rgb(4 8 20 / 0.01)), rgb(4 8 20 / 0.8);
box-shadow: inset 0 0 0 1px rgb(200 200 220 / 0.16), inset 0 0 5px -3px var(--color), inset 0 12px 48px 0 rgb(160 220 240 / 0.08), inset 0 0 120px -100px var(--color);
border-radius: 16px;
color: var(--color);
overflow: hidden;
}
/* 버튼 디자인 설정 */
.button {
--w: 180px;
--h: 60px;
--icon-size: 25px;
--text-color: rgb(210 210 240);
--box-glow-color: transparent;
--box-glow-blur: 20px;
position: relative;
min-width: var(--w);
min-height: var(--h);
border-radius: var(--h);
display: flex;
justify-content: center;
align-items: center;
border: none;
font-family: "Montserrat";
color: var(--text-color);
background: rgb(4 8 20 / 0.8);
box-shadow: 0 0 0 1px rgb(200 200 220 / 0.22), 0 0 var(--box-glow-blur) var(--box-glow-color), inset 0 0 26px -10px var(--box-glow-color);
overflow: hidden;
cursor: pointer;
transition: box-shadow 500ms ease;
z-index: 2;
}
/* 텍스트 설정 */
.text {
z-index: 2;
transform: translateX(-50%);
font-family: "Montserrat";
transition: transform 500ms ease;
}
/* 아이콘 설정 */
.icon {
position: absolute;
width: var(--icon-size);
height: var(--icon-size);
left: 0;
transform: translateX(calc((var(--w)) / 2 + 8px));
transition: transform 500ms ease, color 500ms ease;
}
svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* 버튼 호버 및 액티브 효과 설정 */
.button:hover, .button:active {
--box-glow-color: var(--color);
}
/* 포커스 효과 설정 */
.button:focus-visible {
outline: none;
}
.button:focus-visible:not(:hover, :active) {
--box-glow-color: rgb(114 114 114 / 0.5);
}
/* 반응형 디자인 설정 */
@media (max-width: 500px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
/* 전체 요소의 초기 스타일 설정 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* body 스타일 설정 */
body {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<!-- 첫 번째 카드 -->
<div class="card" style="--color: #00afaf">
<button class="button">
<span class="text">호버</span>
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</button>
</div>
<!-- 두 번째 카드 -->
<div class="card" style="--color: #00bb00">
<button class="button">
<span class="text">호버</span>
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</button>
</div>
<!-- 세 번째 카드 -->
<div class="card" style="--color: #0f2bff">
<button class="button">
<span class="text">호버</span>
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</button>
</div>
<!-- 네 번째 카드 -->
<div class="card" style="--color: #ff6a2f">
<button class="button">
<span class="text">호버</span>
<div class="icon">
<svg>
<use xlink:href="#arrow-right"></use>
</svg>
</div>
</button>
</div>
</div>
<!-- SVG 아이콘 정의 -->
<svg style="display: none">
<symbol id="arrow-right" viewBox="0 0 20 10">
<path d="M14.84 0l-1.08 1.06 3.3 3.2H0v1.49h17.05l-3.3 3.2L14.84 10 20 5l-5.16-5z"></path>
</symbol>
</svg>
</body>
</html>
코드 설명)
이 코드는 웹 페이지에 버튼 효과를 추가하는 예제입니다. 각 버튼은 호버 및 클릭 효과가 적용된 카드 내에 있습니다. 이제 코드의 각 부분에 대해 설명하겠습니다.
1. HTML 구조:
– HTML은 웹 페이지의 구조를 정의합니다.
– `.container` 클래스는 카드들을 담을 그리드 컨테이너입니다.
– `.card` 클래스는 각 카드를 나타냅니다.
– `.button` 클래스는 버튼을 나타냅니다.
2. CSS 스타일:
– CSS는 각 요소의 디자인과 스타일을 정의합니다.
– `.container` 클래스는 그리드 레이아웃을 설정하고 배경색을 지정합니다.
– `.card` 클래스는 카드의 디자인을 설정합니다. 그라데이션 배경과 그림자 효과가 있습니다.
– `.button` 클래스는 버튼의 디자인을 설정합니다. 그림자 효과와 호버 효과가 있습니다.
3. SVG 아이콘:
– SVG 아이콘은 버튼에 사용됩니다.
– `<svg>` 요소는 화살표 아이콘을 정의합니다.
– `use` 태그를 사용하여 아이콘을 참조합니다.
4. 호버 및 클릭 효과:
– 버튼에는 호버 및 클릭 효과가 있습니다.
– 호버 시 텍스트와 아이콘의 위치가 변하고, 그림자 효과가 활성화됩니다.
– 클릭 시 버튼에 적용된 그림자 효과가 강화됩니다.
이 코드는 버튼을 디자인하고 호버 및 클릭 효과를 적용하는 간단한 예제입니다. 웹 개발에서 버튼과 같은 상호작용 요소는 사용자 경험을 향상시키는 데 중요한 역할을 합니다.