Transition button value change

[whodunit]

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 ;)

[Kitty Giraudel]

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

[whodunit]

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

[Senff]

[edit]

[pixelgrid]

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

[Senff]

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

[whodunit]

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

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

[CrocoDillon]

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

EDIT
CLICK TO EDIT

Same CSS :)

[Senff]

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 ! :)

[whodunit]

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

[CrocoDillon]

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)

[Author]

Posts