Forums - Free2Code

Time: 2008-11-21, 09:02pm

Free2Code » Forums » HTML/CSS » creating round button

Please login or register to post a reply.

creating round button

Subject: creating round button · Posted: 2006-11-08, 04:11pm

Rank: ? (2)
Member #: 29041

Hello all,
I was reading this tutorial here
here...tab menu

Im using their example and trying to create a round button. I have both end caps, which is working fine but I would like to have an image in the center as well (since I have a gradient effect applied to my end caps) so that the center has the gradient as well. I cant figure this one out. I only have been using css for a little bit now, so Im still learning.

Heres the code I have so far

Code:

<head>
<style type="text/css">
#navigation a
{
color: #000;
background: #fb0 url("tab-orange-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a span
{
background: url("tab-orange-right2.gif") right top no-repeat;
padding-right: 10px
}
#navigation a:hover {
color: #fff;
background: #2166A4 url("tab-blue-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span
{
background: url("tab-blue-right2.gif") right top no-repeat;
padding-right: 10px
}
</style>
</head>
<div id="navigation"><a href="/"><span>Home</span></a></div>
<div id="navigation"><a href="#">Home</a></div>

Thanks,
Mark

» Post edited 2006-11-08, 04:31pm by Mark_M.

Reply to this · Post link · Top

misterhaan

Subject: Re: creating round button · Posted: 2006-11-09, 03:52am

Rank: ? (4821)
Member #: 3416

you could put another span in there and style it with side margins the width of your end caps, then give it the gradient background.

my mind is like a steel trap! it only hangs on to the big stuff. visit my forums at track7.org

Reply to this · Post link · Top

Mark_M

Subject: Re: creating round button · Posted: 2006-11-11, 07:42am

Rank: ? (2)
Member #: 29041

thanks misterhann,

i assume you mean something like this...which worked

Code:

<head>
<style type="text/css">
#navigation a
{
color: #000;
background: #fb0 url("tab-orange-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a span
{
background: url("tab-orange-right2.gif") right top no-repeat;
padding-right: 10px
}
#navigation a span2
{
background: url("center.gif") ;
}
#navigation a:hover {
color: #fff;
background: #2166A4 url("tab-blue-left2.gif") left top no-repeat;
text-decoration: none;
padding-left: 10px
}
#navigation a:hover span
{
background: url("tab-blue-right2.gif") right top no-repeat;
padding-right: 10px
}
</style>
</head>
<div id="navigation"><a href="/"><span><span2>Home</span></span2></a></div>
<div id="navigation"><a href="#">Home</a></div>

Also do you have any suggestions so that I can have three graphics under it, like a shadowâ�¦ this is how I would do it in tables..

As you can see first row is the button, second row is the shadow

Thanks,
Mark
Code:

<table cellspacing="0" cellpadding="0" border="0">
<tr height="34">
<td width="18" background ="big_button_left.gif"></td>
<td width="401"background ="big_button_mid.gif">button text</td>
<td width="18" background ="big_button_right.gif"></td>
</tr>
<tr height="8">
<td width="8" background ="big_button_left_shadow.gif"></td>
<td width="484"background ="big_button_mid_shadow.gif"></td>
<td width="8" background ="big_button_right_shadow.gif"></td>
</tr>
</table>

Reply to this · Post link · Top

Pages: 1
Please login or register to post a reply.