Posted By

delibash on 05/28/09

Tagged

css
html

Versions (?)

Last Edited at 05/28/09 04:08pm

Statistics

Viewed 567 times

Favorited by 0 user(s)

Related snippets

Pill Button Wrapper

/ Published in: HTML

Creates a "pill" button with rounded corners; expands with text.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<style>
	a.pill {
		text-decoration:none;
		float:left;
		height:22px;
		color:#333;
		line-height:22px;
		font-weight:bold;
		text-align:center;
	}
 
	a.pill span.left {
		background:url(path/image.png) no-repeat left 0;
		display:block;
		width:4px;
		float:left;
		height:22px;
	}
 
	a.pill span.right {
		background:url(path/image.png) no-repeat right 0;
		float:left;
		height:22px;
		padding:0 10px 0 5px;
	}
 
	a.pill:hover > span {
		background-position:right -22px;
	}
</style>
 
<a href="#" class="pill">
	<span class="left"></span>
	<span class="right">test button</span>
</a>