CODEWITHSUNDEEP
css
Linus Oleander
Linus Oleander

Reputation: 18127

Create button using 3 images

I've 3 images, a center block that should be repeated and two end parts (left and right). I want to be able to generate the button below using these three images.

Here is the complete button.

Button

Sorry for the dark background.

I've this code so far.

li {
  background-image: url(/images/middle.png), url(/images/right.png), url(/images/left.png);
  background-position: center, right, left;
  background-repeat: repeat-x, no-repeat, no-repeat;
}

Which generates this button.

Button 2

Anyone knows why my button looks like it does and how to render the first button above? I must use the 3 given images. And no, this isn't an home/school assignment :)

EDIT: I found this tutorial on how to solve the problem. Isn't there a better way to solve the problem, maybe a more semantic way?

Upvotes: 2

Views: 9786

Answers (2)

JohnB
JohnB

Reputation: 18972

Personally, I would try to keep it as simple as possible and use 1 repeat-x image across the middle of the button, and use CSS3 rounded corners to finish off the edges. Gracefully degrades as a square button. A good example is the "Download" button from JQueryUI.com:

Download button from JQueryUI.com

If you only want to support CSS3 compliant browsers, then you can attach multiple images in background-image.

However, pre CSS3, you can only attach 1 background-image per HTML element. You tried to attach 3, and the last 2 images in your CSS are getting ignored.

The tutorial that you found is a good solution for the type of button you are trying to create. It defines at least 3 elements to attach images to. They use 4, but you can do it with only 3.

I assume that your HTML looks like this so far:

<ul>
  <li>
    <a href="#" title="My Text button">My Text</a>
  </li>
</ul>

So you have 2 elements for which to attach; you need at least 1 more:

<ul>
  <li class="link-button">
    <a href="#" title="My Text button"><span>My Text</span></a>
  </li>
</ul>

Should do it. Then the CSS:

li.link-button {
  background: url(/images/middle.png) repeat-x;
}
.link-button a {
  background: url(/images/left.png) left center no-repeat;
}
.link-button span {
  background: url(/images/right.png) right center no-repeat;
}

However, you middle repeating image is a different color!

Upvotes: 1

Jarno Argillander
Jarno Argillander

Reputation: 5945

Here's "old school" version :)

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        ul {
            list-style: none;
        }

        li {
            clear: both;
        }

        .list_button {
            text-decoration: none;
        }

        .left {
            float: left;
            width: 3px;
            height: 23px;
            background: url("./images/left.png") left center no-repeat;
        }

        .right {
            float: left;
            width: 3px;
            height: 23px;
            background: url("./images/right.png") left center no-repeat;
        }

        .middle {
            float: left;
            height: 23px;
            background: url("./images/middle.png") repeat-x;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="#" class="list_button">
                <div class="left"></div>
                <div class="middle">First</div>
                <div class="right"></div>
            </a>
        </li>
        <li>
            <a href="#" class="list_button">
                <div class="left"></div>
                <div class="middle">Second</div>
                <div class="right"></div>
            </a>
        </li>
    </ul>
</body>
</html>

Upvotes: 1

Related Questions