How to Make Sliding Door Buttons

The button designs that can be created with pure CSS are impressive and ever-growing, and we've passed the time when images were the primary visual tool used to create buttons. However, there are still times when a tastefully selected image button is the right tool for the job.

In this tutorial, you'll learn how you can take simple button images and set them up to use as toggleable buttons of all sizes across your website. In the end, you'll produce reusable button code that you can use to generate buttons like these.

Click image to toggle animation.

Sliding Door Buttons Example 1

Creating Your Images

The technique we're going to use to create these buttons is called "sliding-door" CSS. To set up these buttons we need two images for each version of the button — in our case, two black button images and two blue button images, four images in total.

To create these images we start with solid button images.

Blue Button
Black Button

What we need to do is to split each button into two images:

  • The left-hand image will be as narrow as possible while still capturing the full radius of the button corners.
  • The right-hand image will be as wide as possible, as a matter of fact, we'll want to use an image manipulation program to copy the body of the button a couple of times so that we can create really long buttons with the image.

Here are the images we'll end up with after cutting them into the appropriate sizes:

Blue Button LeftBlue Button Right
Black Button LeftBlack Button Right

Once you have all four images created, you're ready to start coding.

Button HTML

Our button HTML will consist of three components: an outer div wrapper, an anchor element, and a span element.

<div class="sliding-button">
  <a href="" class="sliding-link">
    <span class="sliding-text">
      Button Text
    </span>
  </a>
</div>

In the code block above, all three elements are broken out on separate lines so that you can more easily see what's going on. However, in practice, you'll probably want to keep them all inline, especially if you're using a content management system (CMS) such as WordPress that will insert paragraph tags after each line break.

Adding Button Images

Right now, if you render the bit of HTML from the example above, all you'll get is a link that says "Button Text." The next step we'll want to take is to add the button image to our code.

However, before we do that, let's add a bit of styling to the outer div wrapper so that we can see what's going on a little more clearly.

.sliding-button {
  display: inline-block;
  width: auto;
  margin: 20px;
}

That bit of code will simply add some space around our button, and force the containing div to shrink down to the size of the link and text. Now we're ready to add our button images.

.sliding-link {
  background-image: url('blue-button-right.png');
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
}
.sliding-text {
  background-image: url('blue-button-left.png');
  background-size: auto 100%;
  background-position: left;
  background-repeat: no-repeat;
}

So now we've added our button image. Unfortunately, it's not much to look at quite yet. Also, if you zoom in and look closely, you'll notice that the left-hand image is actually just sitting on top of the right-hand image. Not the effect we're going for.

Bad Button

Button Styling

Let's add a bit of padding around the text. This will get our button looking more like a button. In addition, we'll need to change the display of the span and anchor elements to inline-block to get both of them to respond to padding and margin the way we want them to.

.sliding-link {
  display: inline-block;
}
.sliding-text {
  padding: 20px;
  display: inline-block;
}

That code will give our button some size. However, we still have the troublesome overlap issue between the left and right images. What we need to do is use margin to move the right-hand image a little to the right, and then apply the exact same negative margin to the left-hand image.

.sliding-link {
  margin-left: 17px;
}
.sliding-text {
  margin-left: -17px;
}

The 17-pixel value is applicable to our specific button images. If you're using different images, you will need to fine-tune this value by trial-and-error until the button looks right.

Before moving on, let's also go ahead and add some styling to our button text.

.sliding-text {
  color: #fff;
  font-size: 14pt;
  font-family: 'Open-Sans', Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

At this point, our button actually looks like a button!

Good Button

Button Hover Effect

Right now, if you hover your mouse over the button, there's no visual indication that your mouse is over the button. Let's fix that by adding a hover effect.

.sliding-text:hover, .sliding-text:active {
  box-shadow: inset 0 0 0 1000px rgba(255,255,255,.2);
}

While that certainly works, it's a bit rough. First, the hover effect transitions in and out too harshly. Second, if you place the button over a dark background you'll notice that the hover effect extends beyond the rounded corners of the button.

We can fix both of those issues with a few lines of code added to the span element.

.sliding-text {
  -webkit-transition-property: box-shadow; /* Safari */
  -webkit-transition-duration: .2s; /* Safari */
  transition-property: box-shadow;
  transition-duration: .2s;
  border-radius: 12px;
}

Now our hover effect will transition in and out over the course of two-hundredths of a second — a small easing, but enough to make the transition feel smooth. Second, the border-radius rule will round off the corners of the hover effect to fit the image.

Note that the 12-pixel value we applied to the border radius is specific to our button image. If you're using a different image, you'll need to fine-tune this value.

Switching Button Images

Right now, we can add a URL to the anchor element href attribute, and our buttons will work great as links. However, at the top of this post, there was a gif that demonstrated a toggle effect that changed the button image. Let's walk through the process of creating toggle buttons now.

First, we'll need to add the new image to the buttons. The way we'll do that is by adding the button images to a new class, and then using jQuery to toggle the class on and off the button when the button is clicked.

Let's start with the CSS.

.current-button .sliding-link {
  background-image: url('black-button-right.png');
}
.current-button .sliding-text {
  background-image: url('black-button-left.png');
}

Right now, the toggle effect doesn't work. However, if you manually add the class current-button to the button container div, you'll see the second version of your button.

In order to switch between the two versions of the button on click, you'll need to use jQuery to toggle the current-button class on and off for the button.

However, before we do that, we'll need to decide which buttons we want to be toggle buttons. We can do this by adding a class to any buttons that we wish to use as toggle buttons. Let's use the class toggle-button for this purpose.

So, to designate any button as a toggle button, we'd just add that class to the outer div wrapper:

<div class="sliding-button toggle-button">
  <!--button anchor and span-->
</div>

Now, we can use jQuery to toggle the current-button class on and off for that button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.toggle-button').click(function() {
  $( this ).toggleClass('current-button');
  return false;
});
</script>

There are a few things going on in that code. Let's walk through it.

First, we load jQuery from Google Hosted Libraries. If your website already uses jQuery, then you can omit the first script element.

The second script element contains a simple jQuery function. The function watches any element with the class toggle-button. When any element with that class is clicked, a function is fired toggling the class current-button on or off for the clicked element. Finally, the function returns the value false which prevents the default link behavior, which is to reload the page since our anchor element href attribute will be empty on a toggle button.

With those bits of code added, we can toggle our button to our heart's content.

Click image to toggle animation.

Sliding Door Button Example 2

The Full Source Code

If you've been following along, step-by-step, then you'll already have created a full version of the source code for these buttons. However, if you haven't been following along, you can grab the full source code for the button in this tutorial by copying the code below into an HTML document.

<!DOCTYPE html>
<html>
  <head>
    <title>Sliding Door Buttons</title>
    <style>
      .sliding-button {
        display: inline-block;
        width: auto;
        margin: 20px;
      }
      .sliding-link {
        background-image: url('blue-button-right.png');
        background-size: auto 100%;
        background-position: right;
        background-repeat: no-repeat;
        display: inline-block;
        margin-left: 17px;
      }
      .sliding-text {
        background-image: url('blue-button-left.png');
        background-size: auto 100%;
        background-position: left;
        background-repeat: no-repeat;
        display: inline-block;
        padding: 20px;
        margin-left: -17px;
        color: #fff;
        font-size: 14pt;
        font-family: 'Open-Sans', Arial, sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        text-align: center;
        -webkit-transition-property: box-shadow; /* Safari */
        -webkit-transition-duration: .2s; /* Safari */
        transition-property: box-shadow;
        transition-duration: .2s;
        border-radius: 12px;
      }
      .sliding-text:hover, .sliding-text:active {
        box-shadow: inset 0 0 0 1000px rgba(255,255,255,.2);
      }
      .current-button .sliding-link {
        background-image: url('black-button-right.png');
      }
      .current-button .sliding-text {
        background-image: url('black-button-left.png');
      }
    </style>
  </head>
  <body>
    <!--toggle button-->
    <div class="sliding-button toggle-button"><a href="" class="sliding-link"><span class="sliding-text">Toggle Button</span></a></div>
    <!--link button-->
    <div class="sliding-button"><a href="http://example.com" target="_blank" class="sliding-link"><span class="sliding-text">Link Button</span></a></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $('.toggle-button').click(function() {
        $( this ).toggleClass('current-button');
        return false;
      });
    </script>
  </body>
</html>

Putting Your Button to Good Use

The last piece of the puzzle is to put your new buttons to good use. Here are a few ideas to get you started:

  • Add a URL to the anchor element href attribute and use the button to link to any webpage. Note that to do this you'll want to omit the toggle-button class from the button div wrapper.
  • Use additional jQuery or JavaScript to display or hide additional information when the button is toggled.
  • If you're really feeling ambitios, use the buttons for site navigation, and use jQuery to determine if the current page matches the button URL and toggle the current-button class if the two match.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

What Code Should You Learn?

Confused about what programming language you should learn to code in? Check out our infographic, What Code Should You Learn? It not only discusses different aspects of the languages, it answers important questions such as, "How much money will I make programming Java for a living?"