No announcement yet.

Change Cursor on Buttons

  • Filter
  • Time
  • Show
Clear All
new posts

  • Change Cursor on Buttons

    On links like pages, "add to cart", etc. the cursor changes to a hand/finger so visitor knows it's a clickable link. How/where would I change it to do the same on buttons, like Search, Go, etc. Anyone know?

  • #2
    Not sure about this one, maybe someone with more design experience than me could explain this better.

    If you're using forms any input of the type button, image or submit gets the "hand/finger" mouse pointer. Usually any link (<a> tag) gets this pointer too. And also using the style="cursor:hand" will add this to any element.


    • #3
      Hi dynoJean,

      Jim is correct. It's very easy to do. The cursor style currently looks like this "cursor: ;". In your css file, change it to "cursor:hand;" on the version of ".btn" that you are using for the button.


      • #4
        Ok, sounds easy enough! I changed both btn and btn2 in my css like this:
        .btn {
            border: 2px ridge #31100a;
            background-color: #EE9B4F;
            font-family: Verdana, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 11px;
            color: #31100a;
        and uploaded but it still doesn't show up. I'm referring specifically to the buttons for search, mailing list, all on the view cart and all on checkout pages. (actually I guess that's all of the buttons). Anyway, any more ideas of what I could check?

        EDIT: Ah Ha! Just checked in IE and it works there. Any reason it wouldn't in Firefox?

        EDIT2: Just found it; "cursor : hand" is not supported in Firefox; need to use "cursor : pointer"
        All is well. It now works in both IE and Firefox. Here's a link to the site I found this:
        Last edited by dynoJean; 02-26-2006, 09:58 PM.


        • #5
          Thanks for that tip, dynoJean. I'll update my css accodingly.