All geek questions in one place

Reusing existing button code to create multiple buttons in html?

I created an HTML button using an anchor tag, which consists 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 look like this:

button image

My CSS code is:

 .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 a better way to create a button consisting of three images? Because I need to create 10 buttons on my page, and there will be duplicate code if I follow the approach described above for 10 buttons. Do you have any suggestions?

+4
source share
8 answers

You can combine all your images with one image called Sprite. You can then use the background-position property to align them as needed.

The advantage of using CSS Sprite is that you only create one http request for images instead of 10 http requests if you create 10 images, and this is a huge method for optimizing performance.

You also do not need to worry about older browsers, as background-position supported in all browsers.

+1
source

What browser support do you need? And are you alright with graceful degradation? (i.e. the button does not look exactly the same in older browsers, but it still works fine).

With pseudo elements

With them you only need one html element, and the rest can be done using 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

That would be much better: 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 */ }

example

Use CSS Gradient Generator

This method will not work in all browsers, instead, the user will see the login button without a border radius and without a gradient, but it will work fine anyway.

+1
source

I would suggest using CSS3.

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

And you can use any type of CSS currest types.

0
source

Well here is one way:

Start by arranging html to just use simple bindings 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 additional divs for each anchor with this 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 the function to .html() , it will be called again, once for each corresponding element, and returning from the function becomes the new html for the current element.)

0
source

As I'm lazy, I would use sth. like this

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

You can get this up to 2 images using something called the sliding doors effect. You make an image of the left cover with an additional wide middle background in it. Then you create a second image of the right cover.

The left / middle image is displayed in the outer div and then inside the div with the image of the right cover.

They point out at the post that this is no longer the best practice. If you are making a graphic background and cannot rely on CSS3 effects to create your button, I would say that this is a great technique. This is probably just an automatic notification because the article is so old (2003).

As suggested in other sections of this page, you can use CSS Sprites to cut this into one physical image.

We dig a little further this tip from 2012 and combines sprites + sliding doors:

0
source

You can simply use the "button" element. I'm not quite sure what you want to achieve, but you can give 10 buttons of 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 completely abandon what you are trying to achieve, but this will work for what I think you are trying to achieve.

You also cannot stylize a button at all and get a good hover effect on your own, but it will not be the same in every browser.

You can also use regular anchor tags, for example, what you have is to give them a class that will 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 this, just keep your buttons the same as they are now, just duplicate your HTML, change where the links and text bind, for example:

 <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 a 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 will 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 shorten the code while maintaining the current structure. It will also allow you to type one line of code and dynamically add your button.

Let me know if you want more information.

0
source

Best way to create a button using 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 making Internet Explorer 6-9 capable of displaying a radius radius or other CSS3 decoration, you can enable CSS3PIE:

http://css3pie.com/

0
source

Source: https://habr.com/ru/post/1494049/

More articles:


All Articles