About This Article •
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!
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.
Okay for Yuan Li - you’re very welcome. This kind of stuff is fun for me and I enjoy teaching others how to do it.
I’ve created another style, Style 4 to include a horizontal menu. In that code, I changed a few things to make the buttons appear one after the other horizontally. The line I added to the code to make them do that was:
display: inline;
And that was added in the section that begins with #roll ul li {
I also changed a few things in the section below that one. I changed the margin and padding values to accommodate this kind of menu. I added a 5px margin to the right side of the button by changing:
margin: 0 0 5px 0;
to
margin: 0 5px 5px 0;
Remember, the first number here controls the top margin, the next number controls the right margin, the third controls the bottom margin and the fourth controls the left margin. Since our buttons are now in a line, a right margin of 5px was necessary to space them just a bit. If you prefer a bigger space, use 8px or 10px. Side note: a right margin assumes your buttons are aligned from the left or centered. If your buttons are aligned from the right, you would want to set a left margin instead of a right margin. I explain how to align your buttons in the comment after this one.
The other thing I changed was the padding value. Padding is the space within the button where margin is the space outside of the button. Now this is something new to learn. I changed the padding from:
padding: 0 0 0 15px;
to
padding: 0 15px;
Now if you remember from the margin discussion above, we have four values, one for each side of the button right? How come we now only have two values?
Well this is a short-hand way to specify values for margin or padding. If you only have two values, the browser will interpret that as top and bottom get zero padding and left and right get 15px padding.
There you go - beautiful rounded-corner buttons in a horizontal menu! :)
FYI, the code I give you for the horizontal menu aligns naturally to the left of your widget. However, you might want the menu centered like my demo above.
To center your menu, change:
#roll ul {
list-style: none;
}
to
#roll ul {
text-align: center;
list-style: none;
}
To right align your menu buttons, change:
#roll ul {
list-style: none;
}
to
#roll ul {
text-align: right;
list-style: none;
}
That change should teach you something about how to specify text alignment using CSS no? No matter what kind of object (selector) you’re trying to style, the text alignment property is always text-align and the values you can use with that are left, center, right, and default.
Knowing this, you might want to align the text within the button itself, the button name. If you want to do that, then you need to add the text-align property to the section of the code that starts with:
#roll ul li a,
That is an important section as it controls nearly all the styles the buttons use and that’s why it contains the most properties as well.
I added another feature you can add to your own menus too. It’s a menu background. When I originally created this code set, I wrapped the menu in (what’s called) a DIV. The term DIV is short (if I recall correctly) for division but someone correct me if my memory is failing here.
In HTML, a DIV is just a container for content. If you’ve ever looked at iWeb’s published HTML, you’ll see it’s full of DIVs. A DIV really does nothing unless you tell it to do something. DIVs are very handy when it comes to segregating content however. In the case of our menus, we’re going to fire-up that DIV and give it some styles of its own in order to create a nice menu background for your buttons. Here’s how…
At the very top of your code, you’ll see two lines:
<style type=”text/css”>
#roll a {
Were going to insert some new stuff in between those two lines:
<style type=”text/css”>
#roll {
padding: 20px 20px 15px 20px;
background: #B0E5FF;
-moz-border-radius: 16px;
-khtml-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}
#roll a {
If you’re learning some things about CSS here, you’ll notice that we inserted a new section, one that controls #roll. All the other sections have been #roll ul, or #roll ul li or #roll a, etc. Those sections control the unordered list (ul) within the div identified as roll. #roll ul li points to all list items (li) within an unordered list that’s in the div identified as roll.
Are you catching on? So this new section we inserted here refers to nothing within the div identified as roll, but the div identified as roll itself. Here are the properties I assigned to the div to give it that menu background appearace:
padding: 20px 20px 15px 20px;
We want some space around the buttons so I padded the div by 20px. You might notice however that the value for the padding on the bottom is set to 15px. Why? Well because our buttons themselves have a margin of 5px already and that adds to the space. Therefore I only use 15px padding for the bottom padding of the menu background.
background: #B0E5FF;
The background property allows you to specify how the background of the div will appear. I’ve given you a color here, but you may also specify an image if you like. You need to upload the image to your web server and provide the url to it yourself. You would specify that this way:
background: #B0E5FF url(http://mysite.com/image.jpg);
Notice I left the background color in there as well. That’s useful in case for some reason, your image is not available, the background will revert to the color you specified.
The last thing I added to our menu background was the round-corner code. You don’t have to use that if you don’t want to. Just delete the four lines that produce it. Otherwise, you can adjust the radius value on all four lines to suit your taste.
Wow, hard to believe that’s possible right there in iWeb… oh, I gotta create something NEW now, just to test this out! :)
I expect great things from you Master Kenji - post a link when you have something to share with the class :)
Many thanks for you help, How to make the left and right end of the menu to extend to the edge of the page, as I want to use it as the universal navigation menu for the whole site, and how to add hyperlink to each button to let it clickable to direct to the right page within the site.
The menu should naturally extend to the edges of your your pages if you sized the HTML widget that wide. That may be one step people don’t realize is necessary. When you first place the HTML widget on the page, you get a square box that’s probably 300 x 200. You need to stretch that widget box as wide as your page. That will allow your buttons to spread the full width of the widget.
I wrote in a comment above how to hyperlink your buttons. See that section for more detail, but all you have to do is replace the # sign in each button with the URL of the page you want the button linked to.
By the way, I’d like to ADD that I’m SO HAPPY I don’t have to design anything for IE… :)
Amen to that brother.
Is there a way to stroke this object? I’ve been doing some searching, but not EXACTLY sure what I’m looking at :)
also, does it work with ../ form url’s? And where’s a safe directory to place a file that iWeb won’t erase it when you publish?
Here’s one part of it. border: 2px solid #000; :D
Okay I’m just catching up with you here… you want to put a “stroke” around the outside of your menu? I think that’s what you mean, and YES, you have the correct code there to do that:
border: 2px solid #000;
CSS borders are very simple. The first value is how thick the border should be. The second value there (solid) is the style of the border. You can also use: dashed, dotted, double, groove, ridge, inset and outset. For color, well I’ve covered that above but as you know you can use HEX values, RGB values, color names and more, but most people use HEX.
Does it work with form URLs? I don’t know what you mean. You’ll have to elaborate on that one. Remember I’m rusty with the real-world use of iWeb. That goes for your question about where to store stuff so iWeb won’t erase it. I’m guessing maybe in the Sites folder, but maybe someone else can respond to that one.
With URL’s that include “dot, dot, slash” as part of the path. IE, go back up one directory level. I’ve been playing with it, but not sure what I’m doing right or wrong as I found out halfway through that iWeb was deleting my images (should have remembered that one!!)
What I’m trying to create is a single button to replace a recurring image hyperlink I’ve been using thus far. So, I remove all but one button and I’m playing with that last one to see what I get. As an aside, iWeb doesn’t LIKE widgets that small, but I figured out a way around that, so a widget with a 26 pixel height is no problem at all now :)
Oh right I’m with you… I have not tried this with .Mac, but is it possible to use an absolute reference using a slash like this:
/Sites/myimage.jpg
I can’t remember if iWeb publishes a baseref= statement in the head section of iWeb pages or not but if it does, then I think the use of the absolute path using just a / would work.
The whole ../../ thing can be a pain.
Oh, hum… some hosts don’t allow absolute path specification like that tho in HTML files. I forgot about that.
The widgets are in an iframe so breaking out of that might be hard unless you specify the entire path:
http://web.mac.com/rockstar/Sites/myimage.jpg
Thanks for that link to the Tryit Editor. It saves a LOT of time when playing with these parameters.
Kenji what are you talking about there? Tryit Editor? I’ve been heads-down updating my Tabouli theme for RapidWeaver 4.0 and I’m foggy about what we were discussing here.