CSS size of input::before same size as input

Question

I'm using a submit button with a gradient color for the background. I would like to animate that color on hover, though gradient color is not an animatable property. I found a good CSS trick to make this work on an anchor tag using the ::before element, but it doesn't seem to work on the submit button. Below is example code for animating with the anchor. Why does this same code not work when the anchor is replaced with a submit? I think the issue is related to the height and width of the ::before element on the submit button, but can't understand why it doesn't pick up the size of the button. Thoughts?

a {
  background: linear-gradient(to bottom, #3ccf2c 40%, #185400 100%);
  color: white;
  display: inline-block;
  padding: 5px;
  position: relative;
  z-index: 5;
}

a::before {
  background: linear-gradient(to bottom, #2d9b21 40%, #123f00 100%);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  transition: opacity 0.4s;
  top: 0;
  opacity: 0;
  width: 100%;
  z-index: -5;
}

a:hover::before {
  opacity: 1;
}

<body>
  <a>submit</a>
</body>

pseudo element doesn't work on input element – Temani Afif Oct 17 '19 at 20:09 — Temani Afif, Oct 17 '19 at 20:09

score 0 · Answer 1 · answered Oct 17 '19 at 20:09

0

You are able to animate the gradient background on hover. I've created a fiddle for you, so you can see: https://codepen.io/mrmathewc/pen/oNNzeJr.

<a id="DemoGradient">Button</a>

#DemoGradient{
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);
    background: -moz-linear-gradient(#C7D3DC,#5B798E);
    background: -o-linear-gradient(#C7D3DC,#5B798E);
    background: linear-gradient(#C7D3DC,#5B798E);

    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;

    background-size:1px 200px;
    border-radius: 10px;
    border: 1px solid #839DB0;
    cursor:pointer;
    width: 150px;
    height: 100px;

    padding: 10px;
    margin: 10px;
}
#DemoGradient:Hover{
    background-position:100px;
}

I hope this helps.

answered Oct 17 '19 at 20:09

Matt

484
6
19

The OP is asking about adding it to an `` not an anchor tag... _"I found a good CSS trick to make this work on an anchor tag using the ::before element, but it doesn't seem to work on the submit button."_ – zgood Oct 17 '19 at 20:13
Ah, the "but it doesn't seem to work on the submit button." part made me think they were having issues getting it work on button or anchor elements. – Matt Oct 17 '19 at 20:14
I believe he is talking about ``, but it is confusing because the code snippet is not a snippet of the problem, but a working one – zgood Oct 17 '19 at 20:15
Yes, it was meant for input[type="submit"]. And this isn't really animating the background-color, but the background-position. It works and is a handy trick though. – Brandon Oct 17 '19 at 20:55

CSS size of input::before same size as input

1 Answers1