Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A way to resize a css button on :hover?

    For my button I have a css button setup, and then when i define the :hover, it only shows part of the image I have set to display on the :hover. This is becasue the image's dimensions exceed the button, how can I fix this?

    Thanks.
    I am on my way. :)

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You're using the image as a background image right? If so, then you're going to have to set the dimensions of the button to the exact size of the background image. No way around it.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BWiz View Post
    You're using the image as a background image right? If so, then you're going to have to set the dimensions of the button to the exact size of the background image. No way around it.


    Hm, I see, I am trying to do something like the vote buttons here,

    jyte.com


    And was wondering if it was at all possible to resize the buttons.
    I am on my way. :)

  • #4
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Yes, i suppose it is. nhover just change the height attribute I guess. Not too sure though.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Code:
    element { width: 100px; height: 100px; }
    element:hover { width: 300px; height: 300px; }
    If you care about Internet Explorer 6 compatibility, “element” must be an a element or you must use JavaScript.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    something like:

    INPUT {
    background:red url(default_image.gif);
    height:40px;
    }
    INPUT:hover {
    background:red url(default_hover_image.gif);
    height:60px;
    }
    INPUT:focus {
    background:red url(default_focus_image.gif);
    height:60px;
    }
    INPUT:focus:hover {
    background:red url(default_hover_image.gif);
    height:60px;
    }


    in the example you gived the image background omage stays the same, only the height get's bigger

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oh, for ie6 and lower you need to include a htc file to enable enything:hover

    http://www.xs4all.nl/~peterned/csshover.html

  • #8
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by kekjo View Post
    INPUT:focus:hover {
    background:red url(default_hover_image.gif);
    height:60px;
    }
    :s Two psudeo-elements? Does that work?
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #9
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    set a body background color its defaulting grey on my computer

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by BWiz View Post
    :s Two psudeo-elements? Does that work?
    You mean pseudo‐classes. Yes, you can group pseudo‐classes such that an element must be in all of the relevant states for it to work.

    On the other hand, pseudo‐elements cannot be grouped.

    Code:
    input:focus:hover::after {  } /* right */
    input:focus:hover::before::after {  } /* wrong */
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •