css button 만들기-웹사이트를 만들거나 수정할 때 자주 사용하는 UI 요소 중 하나가 바로 ‘버튼’입니다. 버튼은 사용자에게 클릭 가능한 인터페이스를 제공하는 핵심 디자인 요소이며, CSS를 사용하면 색상, 그림자, 애니메이션 효과 등을 자유롭게 조절할 수 있습니다. 이 글에서는 CSS로 버튼을 만드는 기본 원리부터, 실전에서 사용할 수 있는 예제 코드, 워드프레스에 적용하는 방법까지 자세히 설명드리겠습니다.
1 – css button 의 기본 구조와 역할
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 button 예제: 블루 스타일 버튼 만들기 (행별 주석 포함)
다음은 실전에서 바로 사용 가능한 파란색 그라데이션 버튼 예제입니다. 각 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 button 적용하기
워드프레스에서 이 CSS 버튼을 사용하려면 다음 단계를 따라 진행하면 됩니다.
① CSS 코드 추가하기
- 워드프레스 관리자 → [외모] > [사용자 정의하기] > [추가 CSS]
- 위의
.myButton코드 전체를 붙여넣기 - 저장 후 적용
② 버튼 HTML 코드 삽입
글쓰기 화면에서 HTML 블록 또는 “코드 보기” 모드에서 아래 버튼 코드를 삽입합니다:
html<a href="https://example.com" class="myButton">자세히 보기</a>
이렇게 하면 사이트 내 어디서든 동일한 스타일의 버튼을 사용할 수 있습니다.
결론: css button 은 직접 만드는 것이 가장 강력한 디자인 도구
css button 은 외부 플러그인 없이도 사이트 디자인을 개선하고 사용자 경험을 향상시키는 매우 유용한 도구입니다. HTML과 CSS 기본 지식만 있다면, 색상 변경부터 애니메이션까지 자유롭게 커스터마이징할 수 있습니다. 워드프레스를 운영 중이라면, 위 예제를 복사해 직접 적용해보며 스타일을 다양하게 바꿔보세요. 처음엔 어렵지만, 몇 번만 시도하면 누구나 멋진 버튼을 만들 수 있습니다.
