in Experiments
This technique is simple and effective way to have buttons with nice rounded edges using plain CSS without any Javascript usage.
This method was tested on these common browsers:
- Internet Explorer
- Mozilla Firefox
- Opera
- Safary
- Google Chrome
DEMO
Download full example with images here.
Source code for index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>My project</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.rbuttons.css" /> </head> <body> <a class="rbutton red" href="http://www.webtoolkit.info/"><span>Red</span></a> <a class="rbutton green" href="http://www.webtoolkit.info/"><span>Green</span></a> <a class="rbutton blue" href="http://www.webtoolkit.info/"><span>Blue</span></a> </body> </html>
Source code for webtoolkit.shadow.css
/* do not change */ .rbutton { cursor: pointer; display: -moz-inline-box; display: inline-block; padding-left: 5px; padding-bottom: 1px; line-height: 19px; background-position: lef top; background-repeat: no-repeat; } .rbutton span { padding-left: 10px; display: -moz-inline-box; display: inline-block; padding-right: 15px; padding-bottom: 1px; line-height: 19px; background-position: right top; background-repeat: no-repeat; } /* skin */ .red { background-image: url(buttons/red-left.gif); } .red span { background-image: url(buttons/red-right.gif); } .green { background-image: url(buttons/green-left.gif); } .green span { background-image: url(buttons/green-right.gif); } .blue { background-image: url(buttons/blue-left.gif); } .blue span { background-image: url(buttons/blue-right.gif); } /* font size and family */ .rbutton { font-family: verdana; font-size: 11px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #000000; }