CSS 버튼 만들기-웹사이트를 만들거나 수정할 때 자주 사용하는 UI 요소 중 하나가 바로 ‘버튼’입니다. 버튼은 사용자에게 클릭 가능한 인터페이스를 제공하는 핵심 디자인 요소이며, CSS를 사용하면 색상, 그림자, 애니메이션 효과 등을 자유롭게 조절할 수 있습니다. 이 글에서는 CSS로 버튼을 만드는 기본 원리부터, 실전에서 사용할 수 있는 예제 코드, 워드프레스에 적용하는 방법까지 자세히 설명드리겠습니다.
1 – CSS 버튼의 기본 구조와 역할
CSS 버튼은 HTML과 CSS가 함께 작동하여 만들어집니다. HTML은 버튼의 **기본 구조(틀)**를 제공하고, CSS는 그 버튼에 색상, 테두리, 글꼴, 애니메이션 등의 시각적인 스타일을 더합니다.
예: 가장 단순한 HTML 버튼
html<a href="#" class="myButton">클릭하세요</a>
위 코드에서 <a> 태그에 myButton이라는 클래스를 붙였습니다. 실제 스타일은 CSS에서 정의하게 됩니다.
버튼의 역할 요소
padding→ 버튼의 안쪽 여백background-color→ 배경색color→ 텍스트 색상border-radius→ 모서리 둥글게box-shadow→ 그림자 효과cursor: pointer→ 마우스 오버 시 손 모양
이처럼 버튼은 단순한 링크일 수도 있고, 실제 입력 처리나 양식 제출 등 다양한 기능으로 확장될 수 있습니다.
2 – CSS 버튼 예제: 블루 스타일 버튼 만들기 (행별 주석 포함)
다음은 실전에서 바로 사용 가능한 파란색 그라데이션 버튼 예제입니다. 각 CSS 속성에는 주석을 행별로 추가해 이해를 도왔습니다.
css/* myButton 블루 */
.myButton {
box-shadow: inset 0px 1px 0px 0px #97c4fe; /* 버튼 안쪽에 살짝 들어간 입체 그림자 효과 */
background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%); /* 위에서 아래로 파란색 그라데이션 */
background-color: #3d94f6; /* 그라데이션 미지원 브라우저용 배경색 */
border-radius: 6px; /* 버튼 모서리를 둥글게 */
border: 1px solid #337fed; /* 외곽선 색상과 두께 */
display: inline-block; /* 한 줄에 여러 버튼 배치 가능하게 */
cursor: pointer; /* 마우스 올릴 때 손 모양 */
color: #ffffff !important; /* 글자색 흰색으로 지정 (중요 우선순위) */
font-family: Arial; /* 글꼴 설정 */
font-size: 15px; /* 글자 크기 */
font-weight: bold; /* 글자 굵게 */
padding: 6px 24px; /* 상하/좌우 여백 설정 */
text-decoration: none; /* 밑줄 제거 */
text-shadow: 0px 1px 0px #1570cd; /* 글자에 살짝 입체감 주는 그림자 */
}
.myButton:hover {
background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%); /* 마우스 오버 시 그라데이션 반전 */
background-color: #1e62d0; /* 호버 상태 배경색 */
}
.myButton:active {
position: relative; /* 클릭 시 위치 조정 위해 relative 설정 */
top: 1px; /* 클릭했을 때 버튼이 아래로 살짝 눌린 듯한 효과 */
}
/* myButton end */
이 코드는 HTML에서 class="myButton"을 갖는 버튼에 자동으로 적용되며, 마우스를 올리거나 클릭할 때도 다양한 변화 효과를 보여줍니다.
3 – 워드프레스에서 CSS 버튼 적용하기
워드프레스에서 이 CSS 버튼을 사용하려면 다음 단계를 따라 진행하면 됩니다.
① CSS 코드 추가하기
- 워드프레스 관리자 → [외모] > [사용자 정의하기] > [추가 CSS]
- 위의
.myButton코드 전체를 붙여넣기 - 저장 후 적용
② 버튼 HTML 코드 삽입
글쓰기 화면에서 HTML 블록 또는 “코드 보기” 모드에서 아래 버튼 코드를 삽입합니다:
html<a href="https://example.com" class="myButton">자세히 보기</a>
이렇게 하면 사이트 내 어디서든 동일한 스타일의 버튼을 사용할 수 있습니다.
결론: CSS 버튼은 직접 만드는 것이 가장 강력한 디자인 도구
CSS 버튼은 외부 플러그인 없이도 사이트 디자인을 개선하고 사용자 경험을 향상시키는 매우 유용한 도구입니다. HTML과 CSS 기본 지식만 있다면, 색상 변경부터 애니메이션까지 자유롭게 커스터마이징할 수 있습니다. 워드프레스를 운영 중이라면, 위 예제를 복사해 직접 적용해보며 스타일을 다양하게 바꿔보세요. 처음엔 어렵지만, 몇 번만 시도하면 누구나 멋진 버튼을 만들 수 있습니다.
