Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

CSS3 버튼 – 워드프레스 Underscores 테마(?)에서 약간 개량

CSS3로 버튼을 만들면 깔쌈하게 만들 수 있다. IE7,8에서도 그닥 보기 싫게는 안 나오도록 하면 실전에서 써먹을 수 있다. CSS3 버튼만 모아놓은 블로그 글도 있더라.

여튼, 요새 워드프레스로 제빙기 판매 웹사이트를 만들고 있는데, Underscores라는 워드프레스 테마 제작용 테마에서 출발했다. Underscores는 워드프레스 제작사인 오토매틱에서 제공하는 테마다. 테마 만들기 편하라고 제공하는 거다. 테마 만들기 편하면 사람들이 양질의 테마를 많이 만들 거고, 그러면 워드프레스 생태계가 풍성해지고 뭐 그런 거다.

여튼, 이 테마에 CSS3 버튼이 괜찮더라. 그런데 padding이 너무 넓어서 좀 줄였다. padding이 많이 들어가게 하고 싶다면 big-button 클래스를 붙이면 된다. 내가 손좀 본 거다.

그리고 원래 테마에선 a 태그로 버튼을 만들 수는 없다. 약간 손봤다. a 태그에 css-button 클래스를 붙이면 a 태그도 버튼이 된다. 내 블로그 공유 버튼에 사용하려고 긁어와 봤는데, 작동을 잘 하는 걸 보니 쓸만하다. 이런 모양으로 구현된다.

IE7과 8에서 비슷하게 구현하려면 아마 html5shiv라는 라이브러리를 사용해야 할 거다.

코드는 아래.

/* button */
a.css-button,
a.css-button:link,
a.css-button:hover,
a.css-button:active,
a.css-button:visited {
	color: black;
	text-decoration: none;
}
a.css-button,
button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
a.css-button,
button,
input {
	line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */
	*overflow: visible;  /* Corrects inner spacing displayed oddly in IE6/7 */
}
a.css-button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #ccc;
	border-color: #ccc #ccc #bbb #ccc;
	border-radius: 3px;
	background: #e6e6e6;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 15px 17px rgba(255,255,255,0.5), inset 0 -5px 12px rgba(0,0,0,0.05);
	color: rgba(0,0,0,.8);
	cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
	-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
	font-size: 12px;
	line-height: 1;
	padding: 3px 10px;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
a.css-button.big-button,
button.big-button,
html input[type="button"].big-button,
input[type="reset"].big-button,
input[type="submit"].big-button {
	padding: 1em 1.5em;
}
a.css-button:hover,
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa #bbb;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 15px 17px rgba(255,255,255,0.8), inset 0 -5px 12px rgba(0,0,0,0.02);
}
a.css-button:focus,
button:focus,
html input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
html input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb #bbb;
	-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
	box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), inset 0 2px 5px rgba(0,0,0,0.15);
}

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다