이미지없는 CSS3 버튼

현재 글 쓰는 시점에 스킨에 적용되어 있는 버튼입니다. 이미지 없이 css3 코드만으로 둥근 형태의 버튼을 만드는  겁니다.
원문보기 => http://www.red-team-design.com/just-another-awesome-css3-buttons

대략 아래처럼 보입니다.

 
링크는 아래처럼 표시하면 됩니다.

<h2>Actions</h2>
<a class="button" href="">Button</a>
<a class="button add" href="">Add</a>
<a class="button edit" href="">Edit</a>
<a class="button delete" href="">Delete</a>
<a class="button save" href="">Save</a>
<a class="button email" href="">Send email</a>

<h2>Miscellaneous</h2>
<a class="button like" href="">Like</a>
<a class="button next" href="">Next</a>
<a class="button star" href="">Favourite</a>
<a class="button spark" href="">Spark</a>
<a class="button play" href="">Play</a>

<h2>Social media buttons</h2>
<a class="button tw" href="http://twitter.com/catalinred">Follow me</a>
<a class="button fb" href="http://www.facebook.com/RedTeamDesign">Become a fan</a>

버튼과 input 는 아래처럼 표시하면 됩니다.

<h2>Buttons and inputs</h2>
<button class="button">Clean button</button>
<button class="button save">Button with icon</button>
<button disabled="" class="button">Disabled button</button>
<button disabled="" class="button save">Another disabled button</button>

<input type="submit" value="Input submit" class="button">
<input type="button" value="Input button" class="button">
<input type="submit" disabled="" value="Input submit disabled" class="button">
<input type="button" disabled="" value="Input button disabled" class="button">

css 는 아래처럼 지정하면 됩니다. 원문에 다 나와 있어요. 정리만 한것 뿐입니다.

/* button style add , CSS 3 */
.button,
.button {
	display: inline-block;
	white-space: nowrap;
	background-color: #ccc;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
	background-image: -webkit-linear-gradient(top, #eee, #ccc);
	background-image: -moz-linear-gradient(top, #eee, #ccc);
	background-image: -ms-linear-gradient(top, #eee, #ccc);
	background-image: -o-linear-gradient(top, #eee, #ccc);
	background-image: linear-gradient(top, #eee, #ccc);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc');
	border: 1px solid #777;
	padding: 0 1.5em;
	margin: 0.5em;
	font: bold 1em/2em Arial, Helvetica;
	text-decoration: none;
	color: #333;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	-moz-border-radius: .2em;
	-webkit-border-radius: .2em;
	border-radius: .2em;
	-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
	box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover
 a.button:hover {
	background-color: #ddd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
	background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
	background-image: -moz-linear-gradient(top, #fafafa, #ddd);
	background-image: -ms-linear-gradient(top, #fafafa, #ddd);
	background-image: -o-linear-gradient(top, #fafafa, #ddd);
	background-image: linear-gradient(top, #fafafa, #ddd);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
}

.button:active,
 a.button:active {
	-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
	position: relative;
	top: 1px;
}

.button:focus,
 a.button:focus {
	outline: 0;
	background: #fafafa;
}    

.button:before,
 a.button:before {
	background: #ccc;
	background: rgba(0,0,0,.1);
	float: left;
	width: 1em;
	text-align: center;
	font-size: 1.5em;
	margin: 0 1em 0 -1em;
	padding: 0 .2em;
	-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
	-moz-border-radius: .15em 0 0 .15em;
	-webkit-border-radius: .15em 0 0 .15em;
	border-radius: .15em 0 0 .15em;
	pointer-events: none;
}

/* Hexadecimal entities for the icons */
.add:before { content: "\271A";}
.edit:before { content: "\270E"; }
.delete:before { content: "\2718"; }
.save:before { content: "\2714"; }
.email:before { content: "\2709"; }
.like:before { content: "\2764"; }
.next:before { content: "\279C"; }
.star:before {  content: "\2605"; }
.spark:before { content: "\2737"; }
.play:before { content: "\25B6"; }

/* Buttons and inputs */
button.button, input.button {
	cursor: pointer;
	overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
button::-moz-focus-inner {  border: 0;  padding: 0; }

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner {  padding: .4em; }

/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {
	background: #eee;
	color: #aaa;
	border-color: #aaa;
	cursor: default;
	text-shadow: none;
	position: static;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
/* Social media buttons */	
.tw, .fb,
.tw:hover, .fb:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
	text-decoration:none;
}

.tw, .tw:focus { background-color: #88E1E6; }
.fb, .fb:focus {
	background-color: #3C5A98;
	color: #fff;	  
	text-shadow: 0 1px 0 rgba(0,0,0,.4);		
}
.tw:hover {	background-color: #b1f0f3; }
.fb:hover { background-color: #879bc3; }

.tw:before {
	content: "t";
	background: #91cfd3;
	background: rgba(0,0,0,.1);		
	color: #fff;
	font-family: verdana;
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.fb:before {
	content: "f";
	background: #4467ac;
	background: rgba(0,0,0,.1);		
	color: #fff;	
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

자 그럼 여기까지는 원문대로였고 활용을 할줄 알아야겠지요....
제  경우 사이드바 아래보면 버튼이 보일겁니다.

 

아래 이미지를 보시면 rss 라는 새로운 클래스를 만들었습니다.

 

추가하는 방법은 기존의 /* Social media buttons */ 라고 적힌곳에서부터 작성하면 됩니다.
기존에 .tw,  .fb 라고 되있다면 .tw,  .fb, .rss 라고 클래스만 추가해주면 됩니다.

다음.
focus 와 hover, 그리고 :before 에 다음의 코드를 추가해줍니다.

.rss, .rss:focus { 
	background-color:#CB7D20; 
	color: #fff;	  
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.rss:hover { background-color: #ffa500; }
:hover { background-color: #7C5AD6; }
.rss:before {
	content: "r";
	background: #91cfd3;
	background: rgba(0,0,0,.1);		
	color: #fff;
	font-family: verdana;
	text-shadow: 0 1px 0 rgba(0,0,0,.4);
}

이런식으로 미투데이 버튼도 만들고 또 있으면 만들면 됩니다. 

활용은 여러분의 몫입니다.