CODEWITHSUNDEEP
htmlcss
Xavi Alsina
Xavi Alsina

Reputation: 653

Css3 hover input button

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

Upvotes: 0

Views: 99

Answers (2)

Oscar Paz
Oscar Paz

Reputation: 18292

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.

Upvotes: 3

Serlite
Serlite

Reputation: 12258

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!

Upvotes: 3

Related Questions