CSS 블록 버튼이란?
블록 버튼(Block Button)은 화면 전체 너비를 차지하는 버튼으로, 모바일 웹이나 반응형 디자인에서 폼 제출 버튼, CTA(행동 유도) 버튼 등에 널리 사용됩니다. CSS의 display: block 속성과 width: 100% 값을 조합하면 아주 간단하게 구현할 수 있습니다.
예제 코드
다음은 CSS로 블록 버튼을 만드는 완전한 예제 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.blockBtn {
display: block;
width: 100%;
border: none;
background-color: rgb(19, 0, 105);
color: white;
padding: 14px 28px;
font-size: 36px;
cursor: pointer;
text-align: center;
font-weight: bold;
}
.blockBtn:hover {
background-color: rgb(132, 161, 255);
color: black;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Block Button Example</h1>
<button class="blockBtn">Block Button</button>
</body>
</html>
코드 설명
- display: block; — 버튼을 인라인 요소가 아닌 블록 요소로 변경하여 한 줄 전체를 차지하도록 합니다.
- width: 100%; — 부모 요소의 가로 너비 전체를 채웁니다.
- border: none; — 브라우저 기본 테두리를 제거해 깔끔한 디자인을 만듭니다.
- padding: 14px 28px; — 버튼 내부 여백을 설정해 클릭 영역과 시각적 균형을 잡아 줍니다.
- cursor: pointer; — 마우스를 올렸을 때 포인터 커서로 표시하여 클릭 가능함을 알려 줍니다.
- :hover 선택자 — 마우스를 올렸을 때 배경색과 글자색이 바뀌도록 하여 사용자 경험을 향상시킵니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
마무리
이처럼 몇 줄의 CSS만으로 화면 전체 너비를 차지하는 블록 버튼을 쉽게 만들 수 있습니다. 색상, 폰트 크기, 패딩 값 등을 조절하여 사이트 디자인에 맞게 자유롭게 응용해 보세요.