CODEWITHSUNDEEP
jqueryhtmlcss
user1016403
user1016403

Reputation: 12621

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

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?

Upvotes: 4

Views: 241

Answers (8)

Jacques
Jacques

Reputation: 3774

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.

Upvotes: 0

Arbaoui Mehdi
Arbaoui Mehdi

Reputation: 802

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/

Upvotes: 0

rtpHarry
rtpHarry

Reputation: 13125

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.

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:

Upvotes: 0

robooneus
robooneus

Reputation: 1344

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.

Upvotes: 1

David Sdot
David Sdot

Reputation: 2333

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');

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150080

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.)

Upvotes: 0

defau1t
defau1t

Reputation: 10619

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.

Upvotes: 1

no name
no name

Reputation: 7

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.

Upvotes: 0

Related Questions