Grow your CSS skills. Land your dream job.

Transition button value change

  • # April 8, 2013 at 6:41 am

    So, I would like a button to change when hover but not the size or color but the value.

    You hover the button and it changes from eg. “EDIT” to “CLICK ME TO EDIT”. Another thing, how to do the same thing but wit ha glyph on the button, eg. there is an icon of a pen on the button and it changes to “CLICK ME TO EDIT”.

    I’ll buy a beer to anyone who could help me with it ;)

    # April 8, 2013 at 7:11 am

    I’d go with JavaScript. You could also display content with CSS pseudo-elements, but it doesn’t sound like a good idea.

    # April 8, 2013 at 7:14 am

    Yeah, I was wondering whether it is possible to do it with HTML/CSS only.

    # April 8, 2013 at 7:15 am

    [edit]

    # April 8, 2013 at 7:18 am

    you can create an :before pseudo element and use the element:hover:before selector and either change the opacity of the pseudo element to 1 or display:none to display:block . :after would work the same . pseudo element has to be set to 100% width and height

    # April 8, 2013 at 7:20 am

    Pure HTML/CSS solution (no pseudo elements): http://codepen.io/senff/pen/rbIJs

    # April 8, 2013 at 7:39 am

    oh, thank you Senff. where Can I send the beer? :)))

    @pixelgrid. I’ll try to do it also. Thank you.

    # April 8, 2013 at 8:14 am

    Slightly different version to Senff’s, because having multiple input elements feels weird to me:

    Same CSS :)

    # April 8, 2013 at 8:16 am

    Thats even better.

    Mine actually used inputs because I started with a JQ solution and inputs (changing the value attribute), but in the end @CrocoDillon‘s solution makes more sense. You can send the beer to him, @whodunit ! :)

    # April 8, 2013 at 9:08 am

    Oh, brilliant! CrocoDillon’s one makes more sense to me. I owe you both a beer ;)

    # April 8, 2013 at 9:10 am

    I just adapted your solution, you’ve earned that beer… judging by your avatar you’d enjoy it more then I’d anyway ;)

    (note to self, always refresh before posting)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".