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
– Oscar Paz, Commented Mar 17, 2014 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
– Xavi Alsina, Commented Mar 17, 2014 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
– tywalker, Commented Mar 17, 2014 at 17:03
Check out the 2nd line of the post (btw, i'll edit it to make it more obvious) — Xavi Alsina
– Xavi Alsina, Commented Mar 17, 2014 at 17:04

Oscar Paz · Accepted Answer · 2014-03-17 17:23:55Z

3

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.

edited Mar 17, 2014 at 17:23

answered Mar 17, 2014 at 17:18

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xavi Alsina Over a year ago

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

Oscar Paz Over a year ago

You don't have transitions for the element... I'll update the jsfiddle.

Community · Accepted Answer · 2017-05-23 12:11:10Z

3

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!

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 17, 2014 at 17:15

Serlite

12.3k5 gold badges40 silver badges50 bronze badges

Collectives™ on Stack Overflow

Css3 hover input button

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related