You must be familiar with css button with hovered and pressed-style, we always meet them around the internet world with ease. Fortunately, we can make them with a very simple css technique. By using built-in css pseudo selector (:hover and :active) we can manipulate a boring link navigator into a cute one.

As i said before we’ll use css pseudo selector, :hover and :active. :hover is a pseudo-selector to read user’s hovering action to our element while :active read pressing action. To make the button we need button image sprites as the background image, the image sprites divided into three states : normal state, hover state and press state.

We’ll put the image sprite as background image and play it’s position based on the user action, for example in the normal state the background image position will be set to ‘top left‘, hover state set to ‘center left‘ and press state set to ‘bottom left‘. These setted position will automatically set our background image position as our request.

We’ll set the html into following script :

<a class="yellow-button" href="#">This is a Yellow Button</a>

And the last script is CSS :

.yellow-button {
	display:block;
	width: 201px;
	height: 46px;
	padding: 21px 0 0 0;
	background: url('images/yellow-button.png') top left no-repeat;
	margin-bottom: 2em;
	margin-right: 2em;
	float: left;
}
 
	.yellow-button:hover {
		background-position: center left;
	}
 
	.yellow-button:active {
		background-position: bottom left;
		padding-top: 22px;
	}

Ok, that’s it, thank you for reading! You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated

Tags :   Code Snippet    CSS    Menu  

Share :           [Code Snippet] CSS : Hover and Press Button (via @hdytsgt)

  Similar Stuffs  

• Photoshop Effect vs CSS3 Properties
• Take Control of Your Table View
• Engage 2 CSS Positions : Relative & Absolute
• How To Create iPhone-Style Navigation (Part I)
• Nice Menu : CSS Animation & jQuery Animate