Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Buttons in HTML or CSS

M

MacForum55

macrumors newbie
Original poster
Mar 16, 2012
21
0
Hi I made two buttons that are semi complex (Ribbon shaped, and one is circular) in photoshop and when I include them as images to reference in the HTML code for a particular button it inputs them as squares (including the canvas) which is both improperly sized and defeats the purpose of the button as I want them to have to click the new shape not just a square canvas around the shape.

Does anyone know how to fix this or give me a run down on Buttons in HTML or CSS?

Thanks
 
MacForum55 said:
Hi I made two buttons that are semi complex (Ribbon shaped, and one is circular) in photoshop and when I include them as images to reference in the HTML code for a particular button it inputs them as squares (including the canvas) which is both improperly sized and defeats the purpose of the button as I want them to have to click the new shape not just a square canvas around the shape.

Does anyone know how to fix this or give me a run down on Buttons in HTML or CSS?

Thanks
Click to expand...

What exactly are you trying to do with those images? are they links?

If so, the mark up for them would be something like this:

<a class="ribbon" href="link"></a>
<a class="circle" href="link"></a>

the css:

.ribbon{background:url(path to your ribbon image) no-repeat left/right, top/bottom, center/center; (position of your image within the parent element)
display:block;(makes the whole area clickable)
height:whatever the height of your image is;
}
.circle{
background:backgroundcolor;
height:same applies as above;
width:width of the circle
-moz-border-radius:should be half the height and width of your circle!;
-webkit-border-radius:same as moz-border-radius;
display:block;
}
here is a circle tutorialhttp://blog.ardes.com/2009/3/4/css-circles just in case.
 
Sorry it took so long to reply I was AFK.

Yeah they would be links to another part of the site.

I'll try that code in a minute. That should remove the excess canvas' clickability? I.E. you would have to click on the ribbon not just the square around the ribbon that is part of the canvas when the image was created in photoshop?

Thanks!
 
MacForum55 said:
Sorry it took so long to reply I was AFK.

Yeah they would be links to another part of the site.

I'll try that code in a minute. That should remove the excess canvas' clickability? I.E. you would have to click on the ribbon not just the square around the ribbon that is part of the canvas when the image was created in photoshop?

Thanks!
Click to expand...

No, that code would make it a block around the ribbon, that would be clickable.
 
how would one get just the ribbon image to be clickable not the whole canvas that the ribbon sits on?
 
Bump

I'm still in desperate need of help if someone knows the solution I would greatly appreciate some advice.

I really just need the ribbon to be clickable not the whole canvas the .png file of the Ribbon is based on. Otherwise it would defeat the purpose of the button as you don't actually have to click on the Ribbon but just somewhere near it?

I can provide more information if people have questions about it to help with responses?

Thanks everyone
 
like sendaii already said the whole area of the ribbon would be clickable. you can remove the borders of the link by adding the following command to both links....

text-decoration:none;


usually buttons are set as block elements, even though links are actually inline elements, meaning if you have text links, only the text would be clickable. not the surrounding area.
the command for that would be:

display:inline;

instead of display:block;
for further understanding you can check out the w3schools css reference http://www.w3schools.com/cssref/pr_class_display.asp
hope this helps you in accomplishing what you're trying to do.
 
It's a primitive solution, but you could just use an image and image map. You could probably find more modern solutions using canvas in HTML5 (which I know next to nothing about), but this would be backward compatible. One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS.
 
olup said:
like sendaii already said the whole area of the ribbon would be clickable. you can remove the borders of the link by adding the following command to both links....

text-decoration:none;
Click to expand...

Try to avoid doing this. You make things really difficult for keyboard users as you suppress keyboard focus indications

----------



olup said:
What exactly are you trying to do with those images? are they links?

If so, the mark up for them would be something like this:

<a class="ribbon" href="link"></a>
<a class="circle" href="link"></a>

the css:

.ribbon{background:url(path to your ribbon image) no-repeat left/right, top/bottom, center/center; (position of your image within the parent element)
display:block;(makes the whole area clickable)
height:whatever the height of your image is;
}
.circle{
background:backgroundcolor;
height:same applies as above;
width:width of the circle
-moz-border-radius:should be half the height and width of your circle!;
-webkit-border-radius:same as moz-border-radius;
display:block;
}
here is a circle tutorialhttp://blog.ardes.com/2009/3/4/css-circles just in case.
Click to expand...

Just using a background image is a bad idea as these images will disappear when using Windows high Contrast mode.
 
I do not believe what you are looking to do is possible with simple HTML/CSS. Even though the image has transparent areas, they still are considered part of the image -- they are in no way absent. The browser is only aware if an image region was clicked on- you would need to use JavaScript to identify where inside that image the mouse was clicked.

If the ribbon does not have too complex of a shape you could use JavaScript to identify where the mouse was clicked within the image and figure out if it's within a certain pixel boundary you care about. This is good for regular shapes. Complex shapes quickly become mathematical nightmares.

If this a complex shape, read the pixel color under the mouse when the mouse is clicked and use that data to decide if the mouse is over content you care about.
 
Thanks! What would the JavaScript for something like that look like? I'm less familiar with JavaScript.

The ribbon is not too complex it is only straight edges but it is folded over so it is not just a simple rectangle.

Also what if the ribbon has slightly different colors? Ie red, darker red stripes and than golden text?

Thanks so much
 
If it's really that complex, and you're not willing to budge on the area clickable, I would suggest making a flash button. I shudder at the thought.
 
Just make the entire image clickable.

1 - Fitts' law will make sure your users are happy.

2 - It's the standard way to do it.

3 - Anything else is either going to be a hack (javascript) or difficult to maintain (image map).

What's the compelling reason to not make the negative space clickable?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back