Re-using existing button code to create many buttons in html?

Question

I created an HTML button using anchor tag which is composed of three images as shown below:

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

The result button will be as below:

button image

My CSS code:

.my_button .left {
    background: url("./images/left.png") left center no-repeat;
}

.my_button .right {
    background: url("./images/right.png") left center no-repeat;
}

.my_button .middle {
    color:#FFFAF0;
    background: url("./images/middle.png") repeat-x;
}

Is there any better way to create a button composing three images? Because I have to create 10 buttons in my page and there will be duplicated code if I follow the above approach for 10 buttons. Do you have any suggestions?

Thanks for ur reply. but border-radius will not work in IE7. Also, the thick horizontal line inside the button will not be displayed in IE. That is why i am using images. — user1016403
– user1016403, Commented Jul 29, 2013 at 12:17
Your question was about images, not about border-radius. Maybe you should change your question. — putvande
– putvande, Commented Jul 29, 2013 at 12:18

defau1t · Accepted Answer · 2013-07-29 12:17:55Z

1

You could combine all of your images in to one image called as a Sprite. Then you could use background-position property to align them as needed.

The advantage of using a CSS Sprite is that you are making just one http request for images instead of 10 http requests if you create 10 images and that is a huge performance optimization technique.

You also don't need to worry about legacy browsers as background-position is supported in all the browsers.

answered Jul 29, 2013 at 12:17

defau1t

10.6k2 gold badges37 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

There are advantages to sprites, but in this case OP wants to reuse the same three images for ten buttons. The question is how to avoid duplicating the (relatively) complicated code involved in making one button ten times.

robooneus · Accepted Answer · 2013-07-29 12:27:34Z

What sort of browser support do you need? And are you OK with graceful degredation? (i.e. having the button not look exactly the same in older browsers, but still function perfectly well).

With pseudo elements

With these you would only need one html element and the rest can be done with CSS

.my_button:before {
        content:'';
        background: url("./images/left.png") left center no-repeat;
        position:absolute;
        left:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button:after {
        content:'';
        background: url("./images/right.png") left center no-repeat;
        position:absolute;
        right:0;
        height:XXpx;
        width:XXpx;
    }

    .my_button .middle {
        color:#FFFAF0;
        background: url("./images/middle.png") repeat-x;
    }

in the above code, XXpx should be the height and width of the background image element

OR with CSS3

This would be a much better way: just use CSS3 to style the button:

.my-button {
    border-radius:5px; /* don't forget browser prefixes */
    padding:Xpx;
    border:solid 1px blue;
    /* code for css gradient */
}

an example

Use CSS Gradient Generator

This way will not work in all browsers, instead the user would see the log in button without the border-radius and without the gradient, but it would still work perfectly fine.

no name · Accepted Answer · 2013-07-29 12:13:33Z

0

I would suggest to use CSS3.

.mybutton{ width:120px; border-radius:5px; background:#c3c3c3; padding:5px; }

And you will be able to use anyware the currest CSS class.

answered Jul 29, 2013 at 12:13

no name

77 bronze badges

Comments

nnnnnn · Accepted Answer · 2013-07-29 12:22:57Z

0

Well here's one way:

Start by tidying up your html to just use plain anchors with a common class:

<ul>
    <li> <a href="#" class="my_button">Log In</a></li>
    <li> <a href="#" class="my_button">Other Function</a></li>
    <li> <a href="#" class="my_button">Extra Function</a></li>
</ul>

Then use some jQuery to insert the extra divs for every anchor with that class:

$("a.my_button").html(function (i, oldHtml) {
  return '<div style="width:' + ($(this).width()+40) + 'px"><div class="left"></div>' +
         '<div class="middle">' + oldHtml + '</div>' +
         '<div class="right"></div></div>';
});

(If you pass a function to .html() it will be called repeatedly, once for each matching element, with the return from the function becoming the new html for the current element.)

edited Jul 29, 2013 at 12:22

answered Jul 29, 2013 at 12:17

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Comments

David Sdot · Accepted Answer · 2013-07-29 12:24:47Z

0

As I'm lazy I would use sth. like that

function addButton(id, href, text){
   $('ul').append('<li><a id="' + id + '" href="' + href + '" class="my_button"<div style="width:77px"><div class="left"></div><div class="middle">' + text + '</div><div class="right"></div></div></a></li>');
}

addButton('bLogin','#','Log In');
addButton('bThis','#','This');
addButton('bThat','#','That');

answered Jul 29, 2013 at 12:24

David Sdot

2,3331 gold badge21 silver badges28 bronze badges

Comments

rtpHarry · Accepted Answer · 2013-07-29 12:36:23Z

You can get this down to 2 images using something called the sliding doors effect. You make a left cap image with an extra wide middle background in it too. Then you make a second right cap image.

Left/middle image goes in outer div, then inside that a div with the right cap image.

http://alistapart.com/article/slidingdoors

They note on the post that this is no longer best practice. If you're doing graphic background and cant rely on the CSS3 effects to build up your button I would still say that this is a great technique. Its probably just an auto notification because the age of the article is so old (2003).

As has been suggested elsewhere in this page you can use CSS Sprites to cut this down to one physical image.

Digging a little further this tip is from 2012 and combines sprites + sliding doors:

http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

Arbaoui Mehdi · Accepted Answer · 2013-07-29 22:34:55Z

The better way is creating the button with css:

a.button {
    text-decoration: none;
    background: #FFF;
    padding: 5px 10px;
    border: 1px solid #CCC;

    /* Adding Vendor Prefixes to ensure the best browser support 
       -moz-    : Gecko based browsers
       -webkit- : WebKit implementations
       -ms-     : Internet explorer's
       -o-      : Opera
    */

    /* Background Gradient */
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #F9F9F9), color-stop(100%, #E9E9E9));
    background-image: -webkit-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -moz-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: -o-linear-gradient(top, #F9F9F9, #E9E9E9);
    background-image: linear-gradient(top, #F9F9F9, #E9E9E9);

    /* Gradient for IE6+ */
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#f9f9f9', endColorstr='#e9e9e9');

    /* Border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

But if you like makes internet explorer 6-9 capable for rendering border-radius or other CSS3 decoration, you can include CSS3PIE:

http://css3pie.com/

Jacques · Accepted Answer · 2013-07-30 14:35:46Z

0

You could simply use the "button" element. I'm not entirely sure what you're wanting to achieve, but you could give 10 buttons the same class.

HTML:

<button class="myButton" onClick="location.href='myPage.html'")>Log In</button>
<button class="myButton" onClick="location.href='anotherPage.html'")>Next Link</button>

CSS:

.myButton{
   background-image:url("image.jpg");
}

.myButton:hover{
   background-image:url("hover.jpg");
}

I could be completely off base on what you're trying to achieve, but that would work for what I think you're trying to achieve.

You could also not style the button at all and get a nice hover effect on its own, but it won't be the same in every browser.

You could also use regular anchor tags like what you have, give them a class that would work on all buttons:

<a class="myButton" href="myPage.html">Log In</a>
<a class="myButton" href="anotherPage.html">Link 2</a>

Oh, and if you don't want to do any of that, just keep your buttons that same as they are now, just duplicate your HTML, change where the anchor links to and the text, like so:

<body>
    <ul>
        <li>
            <a href="#" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Log In</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#1" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Different link</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
        <li>
            <a href="#2" class="my_button">
                <div style="width:77px">
                    <div class="left"></div>
                    <div class="middle">Another link.</div>
                    <div class="right"></div>
                </div>
            </a>
        </li>
    </ul>
</body>

Adding PHP solution.

functions.php:

<?php 
    function myButton($link, $title){
     echo  '<a href="'.$link.'" class="my_button">
            <div style="width:77px">
                <div class="left"></div>
                <div class="middle">'.$title.'</div>
                <div class="right"></div>
            </div>
        </a>';
    }
?>

Your new page would be page.php (not html)

page.php:

<?php
include_once 'functions.php';
?>
<body>
        <ul>
            <li>
             <?php myButton('link.html', 'Click Me') ?>
            </li>
            <li>
             <?php myButton('anotherlink.html', 'No, Click Me!') ?>
            </li>
        </ul>
</body>

This will allow you to cut down on code, while keeping your current structure. It will also allow you to type one line of code and will dynamically add your button.

Let me know if you want more info.

edited Jul 30, 2013 at 14:35

answered Jul 29, 2013 at 12:37

Jacques

3,7942 gold badges23 silver badges45 bronze badges

5 Comments

Jacques Over a year ago

I'm not sure why you're needing three images in separate DIVs, if you could explain that, I'm sure I could give a better answer.

user1016403 Over a year ago

Jack, thanks for ur reply. i kept 3 images because i need the look and feel of button exactly as i shown in the screen shot so that it would render exactly in all the browsers..if u can give any solution which will work in all browsers then it would be great..

Jacques Over a year ago

Is the text also an image? If it's not, then it is as simple as having a single background image on one div. I'm mobile right now, but I'll add code when I get back to my office.

Jacques Over a year ago

Ok, so, unless you need the images to be different for each button, use my last example. The only other options you can use without using js/php etc I've already listed. I'm adding a php solution though.

Jacques Over a year ago

Well, now it's my second to last example.

Collectives™ on Stack Overflow

Re-using existing button code to create many buttons in html?

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related