Create more / less button with CSS


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.


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

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: Logo

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

Google photo

You are commenting using your Google 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 )

Connecting to %s