Return to Snippet

Revision: 14295
at May 28, 2009 16:08 by delibash


Initial Code
<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>

Initial URL


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

Initial Title
Pill Button Wrapper

Initial Tags
css, html

Initial Language
HTML