May 21, 2008
These buttons work in iWeb pages! View Live Example
CSS3 will bring a whole new collection of great features to CSS. One of those will be easy rounded corners! This feature is already supported by the major browsers EXCEPT you know who :-/ Your buttons on their browsers will be square, but on the other major browsers, they’ll be beautifully round.
I’ve written the code so you can control every aspect of these buttons: width, height, normal and hover colors for text and background, margins and more. We’ll cover customization via the comments so ask how to do it if you have questions.
Style 1
Here’s the first style I’ve created for you. They’re just like the big buttons I use here at 11Mystics.com. Get the code!
Style 2
Here’s a smaller version with normal text and smaller corners. This produces a more subtle look for your list. Get the code!
Style 3: Why Be Boring?
Hey, don’t create buttons like everyone else – make them cool!. These have background images specified, text shadows and they also illustrate the variable width feature. Get the code!
Style 4: Horizontal Menu
Here’s the menu style Yuan Li requests in the comments below. This menu is horizontal and will space the buttons 5px apart (even if they wrap to two lines) Get the code!
About This Article
This entry was posted by Suzanne on Wednesday, May 21st, 2008 at 3:35 PM and was filed in the Solutions category using the tags: code, css, html, snippet, widget. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.
Dynamic Refresh of Page
Create Pop-Up Content Using Highslide JavaScript
where did you find out about the css3 thing for rounded corners? ive found an article showing you how to do the -webkit-shadow: thing – but not on rounded corners. i think you gotta share that secret with me :-D
I had to climb to the top of some mountain in the Himalayas – dang cold up there! There I found the great secret to CSS3 rounded corners :)
Pretty cool ey? Every curve in my new site design (barring two of them) was produced using the CSS3 border-radius property. You can see them on my section headings, every box, my navigation menu, all form fields and yes, my fancy buttons on pages that have child pages.
Use the Get The Code links above to grab the code. In there you can see how it’s done.
For Mathew, here’s the literal CSS that produces rounded corners for any browser supporting the upcoming CSS3 properties (note that rockstar Microsoft does not support this blah):
/* All Four Corners – Radius of 5px */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
If you want to style only the top corners or just the bottom corners or individual corners, then you need to specify them individually like this:
/* Only Top Corners – Radius of 5px */
-moz-border-radius-topleft: 5px;
-khtml-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
Here are some important things to note about using this CSS code:
I suppose now I’m going to need to teach basic CSS here :-b Might have to start an article on that and teach you all bit by bit. CSS is very, very easy. Anyone can learn the basics and know 90% of what they need to do.
Suzanne: Thanks so much! I won’t get to play around with this code for about a week or so, but I really appreciate that you’ve made it available! I’m looking forward to tweaking my comment CSS styles!
Let me know if you have questions and I’ll be interested to see how you’ve implemented them if you’re willing to share :)
Here is some general information for those who aren’t familiar with HTML or how to set up the buttons with hyperlinks. Within the code, there’s a lot of mumbo jumbo you likely won’t understand. But the lines you need to attend to are the lines that look like this:
<li><a href=”#”>Button 1</a><li>
Each instance of that line will produce a button in your menu. If you need 10 buttons, you should have 10 instances of that line. From there you can specify a link URL and unique name to display for each button. The dummy links in my code are specified using a pound sign # and the display names are Button 1, Button 2 and Button 3. You should replace those with your own URLs and names. Here’s how…
HOW-TO Insert Your Link URLs Into The Buttons
To link your buttons to the sites or pages you want, you need to replace the pound sign # I have in the code with the URL of the site or page it should go to. For example, if you want to link to my site, you would:
Change: href=”#”
to: href=”http://11mystics.com”
To link to a page at your own site (assuming it’s in the same folder as the page where the buttons are) you just type the page name:
href=”Welcome.html” or href=”About_Me.html”
If your page is in a sub-folder then you need to specify the sub-folder there too:
href=”Blog/Blog.html”
HOW-TO Add More Buttons To Your Menu
If you need more than three buttons, you need to copy the entire line that looks like the one below, and then paste it into the code with the others already there:
<li><a href=”#”>Button 1</a><li>
That’s the line that makes each individual button appear so paste as many instances of that code as you need and then set the URL and button name for each one.
HOW-TO Make Links Open In New Browser Windows
To make your links open in a new browser window, you need to add target=”_blank” to your links like this:
<li><a href=”#” target=”_blank”>Button 1</a><li>
Make sense? You are now certified as a button wizard. :)
For you advanced or adventurous types, perhaps you’d like to try your hand at modifying the styles of your buttons. Here are some basic instructions that should, at least, give you the tools to try various options. We’ll be working with the section of the code near the top that begins with <style type=”text/css”> and please be careful to always include the semi-colon at the end of every style line (I’m using layman’s terms here). The last style for each section (separated by the } bracket) doesn’t need one, but you should stay in the habit of including it anyway. The semi-colon is the delimiter that indicates “this style is complete” and here’s the next one.
Set The Width of Your Menu Buttons
I very clearly indicate in the code which line controls the width of your buttons. In Style 1 and Style 2, you will see near the top, the line that says:
width: 200px;
If you want your buttons to be 150px wide, change 200px to 150px. Any number works, but make sure you pick a number that’s going to accommodate any button name you provide. If the name of the button needs more than 150px, it will wrap onto a second line and that doesn’t always look nice.
Make Your Buttons Variable Width
If you want your buttons to expand as far as they need to for the button name you provide, you can remove the line that says:
width: 200px;
This will force the buttons to size themselves based on the name you provide. Style 3 illustrates this.
Adjust The Space Between Each Button
To adjust the space between buttons, find the line in the code that says:
margin: 0 0 5px 0;
The four values represent the space around each button. The first 0 is the space on top of the button, or above the button. The second 0 is the space to the right of the button. The 5px specifies the space at the bottom or under the button and the last 0 is the space to the left of the button.
If you want to indent your buttons by 10px on the left and you want 3px more space between them, you would change that line to this:
margin: 0 0 8px 10px;
Change The Color of Your Buttons
There are four color designations to note here.
Default State: text color, button background color
Rollover State: text color, button background color
The styles for the default state of the button are all found in the section of the code that’s marked by this:
#roll ul li a, #roll ul li a:visited {
styles
}
The styles for the rollover or hover state of the buttons are found in this section:
#roll ul li a:hover {
styles
}
To change the text color for either state of the button, change the line that says:
color: #AAA; or color: #CCFFFF;
To change the button background color for either state of the button, change the line that says:
background: #EAEAEA; or background: #0099FF;
The way you specify color can vary. You can use literal color names like blue, green, and red. But you need to be sure you use a color name that’s supported. Most people use what we call HEX values which are three or six-digit representations for colors. You need a special color picker that can tell you the HEX value of the color you’ve chosen or you need some kind of reference like the one here:
W3C Schools Color Reference
Set The Font Styles For Your Buttons
All of the font styles are found in the same section that begins with #roll ul li a… To change the actual font, you need to specify the one or ones you want on the line that says:
font-family: ‘Arial Black, Impact, sans-serif;
Please note this important info about specifying fonts. You cannot specify a fancy font here and expect it to display that way for any given visitor of your site. The font that appears for the visitor can only be one s/he has on his/her computer. For example, you might want to use the font named DigitalStrip, but that is NOT a font that ships with every computer, Mac or PC. If a visitor comes to your site, they will NOT see that font regardless if you’ve said to use it or not. However… if they do have the font, and you’ve specified it, then they WILL see it. Here’s how that works.
font-family: DigitalStrip, Chalkboard, ‘Lucida Grande’, Verdana, sans-serif;
Here I’ve specified a list of fonts for my buttons. The way the browser interprets this is like this:
If the user has DigitalStrip installed,
display DigitalStrip,
Else If the user has Chalkboard installed,
display Chalkboard
Else If the user has Lucida Grande installed,
display Lucida Grande;
Else If the user has Verdana installed,
display Verdana,
Else If the user has none of these fonts installed,
display any sans-serif font they have available.
Some more stuff to note about that. First, fonts that have more than one word in the title require quotes: ‘Lucida Grande’, ‘Arial Black’
Second, you should specify the fonts in the order you wish them to be used… i.e. DigitalStrip is your first choice, but if it’s not available, try my second choice, Chalkboard.
Third, your last option should always be one of the font family designations: serif (fonts like Georgia, Times New Roman or Palatino), sans-serif (fonts like Lucida Grande, Arial or Verdana), fantasy (which defaults to the Papyrus font on most computers) or monospace (which is usually Courier New or Andale Mono).
Font size should be obvious. It’s the line in the code that says:
font-size: 16px; or font-size: 12px; depending on which snippet of code you’re viewing.
You can specify any size font you want, but font size needs to be appropriate for another setting called line-height. Obviously you should not specify a font size that exceeds your line-height :-/ Generally speaking, line height should be at least twice the value for font-size. Please see that section below for more information.
I have a two lines in the code that say:
text-transform: lowercase; and letter-spacing: -.06em;
These two lines can be deleted from your instance if you want. The text-transform property is used to make all your letters lowercase or uppercase or small-caps. But this is not necessary. You can control that yourself by the way you type the button name.
The letter-spacing property can also, and should also be removed if you’re not using the Arial Black font. I use -.06em letter-spacing when using the font Arial Black because it pulls the letters closer together. I do that for visual purposes, but again, this is not necessary and would not look good for any other font. Either set it to 0 if you want to keep the line, or just delete the line.
Set The Height of Your Buttons
There are a few ways to specify the height of buttons, but I chose to use the line-height method because it naturally centers the button text in the middle of the button vertically. For Style 1, the line-height reads:
line-height: 32px;
If you’re using a smaller font size like 12px, then a line-height or button height of 32px is probably way too big. For 12px, perhaps a line-height of 24px is more appropriate.
However, you need to mind the radius you’ve set for your rounded corners here because if you set a line-height that is less than twice the value of your border radius, the rounded corners will not appear. For example, if you want rounded corners with a radius of 10px, your line-height MUST be at least 20px (twice the radius). A border radius that is exactly twice the line-height will produce nice pill-shaped buttons. A border radius that is less than twice the line-height (say 5px) will produce a rectangular button with round corners.
The border radius value (how round your rounded corners actually are) is specified on these lines:
-moz-border-radius: 16px;
-khtml-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
All four lines have a value assigned to them, in this case 16px. You can change that value to 10px or 5px or whatever you want, but you must change all four lines and they *should* be identical. Each one is necessary to get the various browsers to recognize the request for round corners. They all do it differently as you can see, at least for now.
After writing all this I sense it may warrant it’s own section, but we’ll see how it goes.
Suzanne, I experienced some problem because Firefox 2.x doesn’t know “display: inline-block” (see: http://developer.mozilla.org/en/docs/CSS:display). That results in buttons with ‘variable’ width. After some trials and searches I tried “display:block” which caused Firefox 2.x to display the button in the same way Safari does. Safari and Firefox 3.0 display the buttons the same way as they did with “display:inline-block”.
You can also make links open in another iframe on the same page. Create an iframe in an HTML-widget:
<iframe name="Showframe" src="./../Listen_Info.html" style="width:770px; height:550px;" >
</iframe>
Adjust “width” and “height” to your needs. I used ‘src=”./../Info.html”‘ to display the content of a local page called “Info” which gives a hint that clicking on a button will open the appropriate page in the iframe.
Now you just have to add your iframe’s name as target to the links:
<a href="#" target="Showframe">Button 1</a>
Hey that’s a cool solution. That would be nice for situations where keeping the user on the main page is important and where the content you want them to read or view is large (requires its own page). Thanks for adding that tip :)
Suzanne, I’m not sure if I understand your reply correctly. The content to be displayed in the iframe doesn’t only need to be one of your own pages but can also be an external page. On my page I have associated several external pages (handball results) to the buttons and the user can display them one by one in the iframe.
I use the internal Info page to just let the user know what will happen. One could also display an external page in the first place.
Hi, thanks for you genuine help with all those novice iweb users. I have been trying to find those snippet buttons for long time, but I have question about how to make navigation bar for each page of the website, which means how to make those vertical listed buttons to be horizontal. Thanks.
Suzanne
You can also make links open in another iframe on the same page. Create an iframe in an HTML-widget:
Adjust “width” and “height” to your needs. I used ’src=”./../Info.html”‘ to display the content of a local page called “Info” which gives a hint that clicking on a button will open the appropriate page in the iframe.
Now you just have to add your iframe’s name as target to the links:
Button 1
This showframe thing is fantastic, can you add more code to make like a tabbed content style, which means that you click each button, you get different showframe swapped at the same position. Cheers
Another question, how do I leave a space at left side of the text on the button.
Mathias – I was just giving one real-world example of where the iframe solution makes a lot of sense, but yes, the content in the frame can be the content of any web site. I still prefer using a new browser window if you just want to present a site, but if it’s content the user needs to read and it isn’t cluttered with other graphics or a full page header/footer, then I really like the iframe solution. Your viewer stays right there with you in the context of whatever s/he was originally doing.