CSS button animation doesn't work, can't figure out why

Question

I have a https://jsfiddle.net/wmrq3ora/ with an example that is not working and I don't know how to fix it.

<div class="submit">
        <input type="submit" value="OVDJE" class="button-blue hvr-shutter-out-horizontal" onclick="upisnik();"/>
</div>

and the styles:

 .hvr-shutter-out-horizontal {
  display: block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #3498db;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.hvr-shutter-out-horizontal:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fbfbfb;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
  color: #3498db;
}
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.button-blue{
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    display:block;
    width: 100px;
    height: 35px;
    border: #fbfbfb solid 4px;
    cursor:pointer;
    background: #3498db;
    color:white;
    font-size:12px;
    padding-top:8px;
    padding-bottom:12px;
    margin-left:auto;
    margin-right:auto;
    font-weight:700;
}

.submit{
    display:inline;
    text-align:center;
    height:35px;
}

I am trying to get it to work like http://ianlunn.github.io/Hover/ background, shutter out transition. Only with a bit different colors. But cant get it to work. What am i missing? Are some styles i used the problem here? Ignore the function call..

Are you using the Hover.css library? Or are you just copying the relevant CSS out of it? — Captain Delano, Dec 16 '15 at 20:01
change the `` to an ``. That's what the hvr-shutter-out-horizontal was designed for. — andi, Dec 16 '15 at 20:01
@andi I thought that it could be used anywhere, regardless of tag — Ivan Horvatin, Dec 16 '15 at 20:02

score 4 · Accepted Answer · edited May 23 '17 at 10:27

4

Problem is that :before pseudo-element doesn't work on input elements. You change the input field to button instead.

Check this answer regarding the pseudo-element.

<div class="submit">
  <button type="submit" class="button-blue hvr-shutter-out-horizontal" onclick="upisnik();">OVDJE</button>
</div>

Fiddle

edited May 23 '17 at 10:27

Community

1
1

answered Dec 16 '15 at 20:01

Robin Carlo Catacutan

13,249
11
52
85

Ok, thanks, ill try it out and get back to you. And can you explain why? Is there such a big difference between input, a and button tag? – Ivan Horvatin Dec 16 '15 at 20:03
@IvanHorvatin :before and :after pseudo-elements only work on container elements because of the way they are rendered as a child of that element. `text` is invalid, but `` is valid. – RPL Dec 16 '15 at 20:09
@IvanHorvatin Great! Glad it helped. – Robin Carlo Catacutan Dec 16 '15 at 20:13
@RobinCarloCatacutan can i ask you about the thing Max Sassen said. Does a button tag work the same way as input? Capable of sending a form when pressed? – Ivan Horvatin Dec 16 '15 at 20:27
@IvanHorvatin Yes, if you set the `type` attribute as `submit`. E.g. ``. Check this [reference](http://www.w3.org/TR/html-markup/button.submit.html). – Robin Carlo Catacutan Dec 16 '15 at 20:32
Thanks @RobinCarloCatacutan Means a lot to me. Ok, one more question and i will be out of your hair :) If i want to add an animation like when i click the button acts like it is clicked, do i need to make the animation and apply it when on click happens like the one i have inside already? – Ivan Horvatin Dec 16 '15 at 20:37
@IvanHorvatin Yeah, I believe you have to apply it when on click happens, if you do mean animation. But if you mean like the one you already have(having outline or border when clicked), you can make use css `:active and :focus`. Check this [fiddle](https://jsfiddle.net/hseahp63/) – Robin Carlo Catacutan Dec 16 '15 at 20:57
@RobinCarloCatacutan Thanks a lot, forgot about that for a moment there. Really gratefull for your help! You helped me a bunch! – Ivan Horvatin Dec 16 '15 at 21:17
@IvanHorvatin Cool no prob, I'm glad I have helped. – Robin Carlo Catacutan Dec 16 '15 at 21:42

score 1 · Answer 2 · answered Dec 16 '15 at 20:16

1

Pseudo elements can only be defined on container elements. Because of the way they are rendered within the container itself as a DOM element. inputs cannot contain other elements hence they're not supported. A button on the other hand, although a form element, supports them because it's a container of other sub elements.

more info on: 12.1 The :before and :after pseudo-elements

<button type="submit" class="hvr-shutter-out-horizontal" onclick="upisnik();">

https://jsfiddle.net/wmrq3ora/4/

answered Dec 16 '15 at 20:16

Max Sassen

650
5
15

So..are you saying instead of input in a form tag i could use button instead and it will work the same way as input? – Ivan Horvatin Dec 16 '15 at 20:21
Im asking this because i have a ajaxform running in the background when a submitHandler occurs. So this would be a good info for me. – Ivan Horvatin Dec 16 '15 at 20:23
Yes it will work on the same way as an input. There was a difference before: http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use#answer-469084 but its was only concidering to older versions of IE (IE6) – Max Sassen Dec 16 '15 at 20:44
Thanks for that piece of info :) – Ivan Horvatin Dec 16 '15 at 20:54
np, glad I could help you – Max Sassen Dec 16 '15 at 20:58

CSS button animation doesn't work, can't figure out why

2 Answers2