Fagjewaerorgo
New Member
Not really a question, but a useful trick for anyone who might be scouring Google for how to do this (although this is probably common knowledge to the experienced web designer). If you have an HTML button that uses a sprite as a background image and \[code\]:hover/:active\[/code\] as rollover queues, and you'd like to use html \[code\]<button>\[/code\] tags:\[code\]<button class="button" onclick="doSomething()">Button Text</button>\[/code\]You can use the following CSS to make the background image stretch to fit the text inside of it, where the \[code\]height/line-height\[/code\] and \[code\]min-width\[/code\] are the height and width of your single button size, respectively:\[code\].button { height:50px; min-width:85px; text-align:center; background:url(button_bg.png); background-size:300% 50px; font-size:15px; font-weight:bold; line-height:50px; border:none;}.button:hover {background-position: -100% 0;}.button:active {background-position: -200% 0;}\[/code\]I don't know if anyone is looking for this functionality, but I feel that it's about time I give something back to the community, even if it's basic. If you do find this useful please let me know!