Create button using 3 images

Question

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?

Could you give us the middle.png, right.png, and left.png too? Helps us to test with home-brewn code. :) — Jarno Argillander, Nov 13 '11 at 19:56
If you target browsers which implement CSS3 maybe should you use `border-radius`, `linear gradients` and `box-shadow` instead of images? — MatTheCat, Nov 13 '11 at 19:58
@Jarno Sure, here they're http://imgur.com/a/vxha5 Right, left, middle. In that order. — Linus Oleander, Nov 13 '11 at 20:00
With that code alone, I get a bulletin + button that spans over the width of the page. Do you see the same issue? — Jarno Argillander, Nov 13 '11 at 20:04
Jarno Try this code; https://gist.github.com/b92df1da54f64a7f801d — Linus Oleander, Nov 13 '11 at 20:07
@MatTheCat Some UI guy at my company has decided that we should use the given images. I'm just a backend developer, I'm not sure why I'm doing this in the first place :) — Linus Oleander, Nov 13 '11 at 20:09
I see, but would be bad if you can render the same effect without images? — MatTheCat, Nov 13 '11 at 20:14
@MatTheCat I did that first using plain CSS(3), but was told that I should redo it. This is me redoing it :) — Linus Oleander, Nov 13 '11 at 20:16
Sad, "UI guys" shouldn't advise developers' work =/ So JohnB solution would be the greatest I think. — MatTheCat, Nov 13 '11 at 20:21

score 1 · Answer 1 · edited May 23 '17 at 11:48

1

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.

Can I have multiple background images using CSS?

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

jsFiddle

However, you middle repeating image is a different color!

edited May 23 '17 at 11:48

Community

1
1

answered Nov 13 '11 at 20:06

JohnB

18,046
16
98
110

Multiply backgrounds are supported in CSS3. So my code should be valid. – Linus Oleander Nov 13 '11 at 20:11
So you are not attempting to support older browsers? What is your lowest common denominator CSS support degradation plan? – JohnB Nov 13 '11 at 20:16
@JohnB This application won't run in a browser. CSS3 and HTML5 will always be supported. – Linus Oleander Nov 13 '11 at 20:18
This is the simplest solution though I couldn't get it working. The button spans to fill the whole width of the page? – Jarno Argillander Nov 13 '11 at 20:42
1

@Jarno Argillander: `float:left;` on the `
`

JohnB

Nov 13 '11 at 20:50

@JohnB I'm not sure why, but I'm getting a warning symbol next to the span background in chrome: http://imgur.com/2l40j Any ideas why? EDIT: It's the same thing with the href (a) background. – Linus Oleander Nov 13 '11 at 20:52

What's "links"? No I don't know why. I can't help you anymore sorry. – JohnB Nov 13 '11 at 20:53

@Oleander: have you tried with just the code JohnB gave you? Without any additions? (I'm not seeing warning symbols in Chrome) – Jarno Argillander Nov 13 '11 at 21:08

score 1 · Answer 2 · answered Nov 13 '11 at 20:36

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>

Create button using 3 images

2 Answers2

Linked