Learn and share. The simplest harmony.

 

[Code Snippet] CSS : Hover and Press Button

Posted on March 16, 2010 and got 14 shouts so far

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.

button3

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.

button2


We’ll set the html into following script :

This is a Yellow Button

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 ;)

 

This Post Tags :

Bookmark Post :

Pin It
  • I was looking for a proper solution for this for so long. Thanks a million!

  • This, my good sir, is a lifesaver!
    You are incredible, keep up the magnificent work!

    P.s. I’m very impressed by the layout, friendly style of writing, and downloadable source files. Great stuff, really separates you from the crowd.

  • One thing though! Your code on this page, for the pressed button, has “background-position: bottombottom left;”

    The code didn’t work for me until I omitted that second bottom and changed it to: “background-position: bottom left;”

    • Yes, it’s syntaxhighlighter bug.

  • Nice one :D !

    Is there a way to keep the button “pressed” when the user is on a certain site? Like writing “yellow-button:active” in class tag won’t work. Does that make sense?

    Or does it make more sense to make a duplicate of “active” class.

    Peace.

    • LANKA, use this code for pressed effect (it will definitely work)

      .yellow-button:active {
      background-position: bottom left;
      padding-top: 22px;
      }

      • Thanks, I will try it :D

  • Thanks, will try it :D

  • Hi. Thank you!
    is there a css way (not jQuary) for changing a div display with an hovered element?

  • thanks tutorial

  • :active property not working….. tried lot many times on different pages

    I m using a LinkButton & normal link ie. tag

    not working for both

    • The :active is definitely working, try this :

      .yellow-button:active {
      background-position: bottom left;
      padding-top: 22px;
      }
      
  • This isn’t working for me. I used the code and the sprites provided. All that comes up are all the three sprites at once please help.

  • I have a problem with padding while button is pressed. The page around the button shftes. You can see it also on your demo page (the “Back to article” text moves down). The same one can see in various browsers (opera, firefox, explorer…) Does anybody know any solution?