Buttons in HTML or CSS

Discussion in 'Web Design and Development' started by MacForum55, Mar 16, 2012.

  1. MacForum55 macrumors newbie

    Joined:
    Mar 16, 2012
    #1
    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
     
  2. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #2
    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.
     
  3. MacForum55 thread starter macrumors newbie

    Joined:
    Mar 16, 2012
    #3
    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!
     
  4. Sendaii macrumors member

    Joined:
    Jun 10, 2011
    #4
    No, that code would make it a block around the ribbon, that would be clickable.
     
  5. MacForum55 thread starter macrumors newbie

    Joined:
    Mar 16, 2012
    #5
    how would one get just the ribbon image to be clickable not the whole canvas that the ribbon sits on?
     
  6. MacForum55 thread starter macrumors newbie

    Joined:
    Mar 16, 2012
    #6
    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
     
  7. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #7
    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.
     
  8. lucasgladding macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #8
    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.
     
  9. jnurthen macrumors newbie

    Joined:
    Mar 20, 2012
    #9
    Try to avoid doing this. You make things really difficult for keyboard users as you suppress keyboard focus indications

    ----------



    Just using a background image is a bad idea as these images will disappear when using Windows high Contrast mode.
     
  10. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #10
    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.
     
  11. MacForum55 thread starter macrumors newbie

    Joined:
    Mar 16, 2012
    #11
    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
     
  12. lucasgladding macrumors 6502

    Joined:
    Feb 16, 2007
    Location:
    Waterloo, Ontario
    #12
    I'm not sure whether everyone has something against image maps, or just missed the post, but they are probably the most backwards-compatible solution, were designed for this case, and should be accessible.

    In case you want to proceed with the javascript solution, here is a thread on stackoverflow about it:
    http://stackoverflow.com/questions/5948251/click-area-on-sprite-in-canvas
     
  13. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #13
    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.
     
  14. bpaluzzi macrumors 6502a

    bpaluzzi

    Joined:
    Sep 2, 2010
    Location:
    London
    #14
    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?
     

Share This Page