Create more / less button with CSS

Description:

Create a button labeled “more” that changes into “Less” when area is expanded. Can be used also for other similar situations like “Expand / Contract”, “Maximize / Minimize” and so on.

Solution:

First, create the image, containing both sides of the button, so also “More” and “Less”, let’s say 100px width and 40px height, of which, 20px height for each of the image.

Second, create the mark-up for the button and add the following CSS class:

.button {
    background-image: url(“/image/more_less.png”);
    background-position: 0 0px;
    height: 20px;
    width: 100px;}

Then, with javascript onClick() make sure you change the background-position attribute, to incorporate the second part of the image:

.button {
    background-image: url(“/image/more_less.png”);
    background-position: 0 -20px;
    height: 20px;
    width: 100px;}
Advertisements

About admin

Just another php developer trying to give something back to the community.
This entry was posted in Script and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s