Css3 hover input button

Question

I am working on a css3 hover effect button for my website but seems like the effect on <input> does not work.

WHAT I WANTED TO DO: on this DEMO you will see what I am trying to do:

<button class="some classes">Contact</button>

The problem comes on the <input> of my contact form, since it does not work.

I am trying to solve the problem but I dont know what am I missing.

DEMO UPDATED: JSFIDDLE

Should I try to make the form work without inputs?

Thanks in advance

It works for me on Chrome 33. When I hover over the button, the text colour animates smoothly. — Oscar Paz, Mar 17 '14 at 17:01
The problem there is about i dont want animate just the text colour, if you check out the demo, you'll (inside the blue section) a different buttons. I just want to do the same as the one in the middle bottom. — Xavi Alsina, Mar 17 '14 at 17:02
looks good from my back porch man. Im on chrome as well... just checked it on Safari and Firefox as well (latest versions). Works just fine. I have a mac so can't check IE. — tywalker, Mar 17 '14 at 17:03
Check out the 2nd line of the post (btw, i'll edit it to make it more obvious) — Xavi Alsina, Mar 17 '14 at 17:04
Also modifying the original code it does not work // EDIT: My wrong, i added old fiddle — Xavi Alsina, Mar 17 '14 at 17:16

score 3 · Answer 1 · edited May 23 '17 at 12:11

I think you'll have to make this work without using an <input> element. Pseudo-elements like :before and :after can only be rendered for container elements, as they actually end up inside the element. Since <input> isn't a container element, you can't use this code with it with just pure CSS. (Probably could once you introduce JavaScript, but I'm not sure you want to create that much overhead for just a button effect.)

Here's a link to another question on StackOverflow that is in the same vein as yours, if you want to read more. Hope this helps!

Oscar Paz · Accepted Answer · 2014-03-17T17:23:55.777

I've made some changes (jsfiddle) and now it works, although, among other things, <inputs> have to be substituted by <buttons>. Why? Because the input element can't contain children, so the :after pseudo-element is not rendered. Besides that, you needed to set the content and the position properties for your :after element:

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

EDITED For the transitions to work in the :after element:

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -webkit-transtion: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
}

New jsfiddle.

It works fine, but why the transform does not work? If you check the first one you will se how its transform a bit before displaying on opacity: 1 — Xavi Alsina, Mar 17 '14 at 17:20
You don't have transitions for the element... I'll update the jsfiddle. — Oscar Paz, Mar 17 '14 at 17:23

Css3 hover input button

2 Answers2