Computing Magazine

Create More / Less Button with CSS

Posted on the 27 March 2012 by Akahgy


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

Back to Featured Articles on Logo Paperblog