이미지없는 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 는 아래처럼 지정하면 됩니다. 원문에 다 나와 있어요. 정리만 한것 뿐입니다.


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

 
아래 이미지를 보시면 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);
}

이런식으로 미투데이 버튼도 만들고 또 있으면 만들면 됩니다. 
활용은 여러분의 몫입니다.