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..

Answer 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/

Answer 2

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