Web development, coding & SEO

A buttonlike link, CSS

Sample

buttonlike link

3-d push button effect, no JavaScript nor images, pure CSS - http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml

Markup

<p class="buttonlike"><a href="#" title="buttonlike link">buttonlike link</a></p>

CSS

.buttonlike a {
	background:#fc0;
	border:1px solid;
	border-color:#aaa #000 #000 #aaa;
	display:block;
	text-align:center;
	text-decoration:none;
	width:111px;
}
.buttonlike a:hover{
	border-color:#000 #aaa #aaa #000;
	left:1px;
	position:relative;
	top:1px;
}

---

Sample

This That

Markup

<a class="like-a-button" href="#">This</a>
<a class="like-a-button toggle" href="#">That</a>

CSS

.like-a-button{
	background:url(like-a-button.jpg) left center no-repeat;
	display:block;
	font-size:11px;
	height:15px;
	line-height:14px;
	margin:3px 0;
	padding-left:33px;
	padding-top:2px;
	width:93px;
}
.like-a-button.toggle{
	background:url(like-a-button-toggle.jpg) left center no-repeat;
}
.like-a-button:link,
.like-a-button:visited,
.like-a-button:hover,
.like-a-button:active{
	color:#aaa;
	text-decoration:none;
}

2008

---