웹사이트에서 다운로드 버튼은 사용자의 시선을 끄는 중요한 요소입니다. CSS를 활용하면 버튼의 색상, 크기, 여백, 마우스 오버 효과 등을 자유롭게 꾸밀 수 있습니다. 아래 예제에서는 Font Awesome 아이콘과 함께 다운로드 버튼을 스타일링하는 방법을 소개합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
button{
background-color: rgb(78, 15, 129);
border: none;
color: white;
padding: 12px 30px;
cursor: pointer;
font-size: 30px;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
background-color: rgb(42, 7, 82);
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Download Buttons Styling Example</h1>
<h1>Button 1</h1>
<button style="margin-left:33%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button>
<h1>Button 2</h1>
<button style="text-align: center; width: 100%;"><i class="fa fa-download"></i> DOWNLOAD NOW</button>
</body>
</html>
주요 스타일 속성 설명
위 코드에서 사용된 핵심 CSS 속성은 다음과 같습니다.
- background-color: 버튼의 배경색을 보라색 계열(rgb(78, 15, 129))로 지정하여 눈에 띄게 만듭니다.
- border: none: 기본 버튼 테두리를 제거해 깔끔한 디자인을 완성합니다.
- color: white: 흰색 글자가 보라색 배경 위에서 잘 대비되도록 설정합니다.
- padding: 12px 30px: 상하 12px, 좌우 30px의 여백으로 버튼을 넉넉하게 만들어 클릭하기 쉽게 합니다.
- cursor: pointer: 마우스를 올렸을 때 포인터 모양으로 변경해 클릭 가능함을 알려줍니다.
- font-size / font-weight: 크고 굵은 글씨체로 버튼 문구를 강조합니다.
- button:hover: 마우스를 올리면 배경색이 더 진한 보라색(rgb(42, 7, 82))으로 바뀌며 인터랙티브한 효과를 줍니다.
또한 첫 번째 버튼은 margin-left: 33%로 화면 중앙 근처에 배치했고, 두 번째 버튼은 width: 100%와 text-align: center를 적용해 전체 폭을 차지하는 형태로 만들었습니다.
실행 결과
위 코드를 실행하면 다운로드 아이콘이 포함된 두 개의 보라색 버튼이 출력됩니다. 첫 번째 버튼은 일반적인 크기로 중앙에 배치되고, 두 번째 버튼은 화면 전체 폭을 사용하는 스타일로 나타납니다.