Hover transition from bottom to top on button not working

Question

I am trying to mimic the hover transitions for buttons as found on this page.

I have the following so far:

.hs-button {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  background: #fff336;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
input[type="submit"]:hover {
  text-decoration: none;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
    border: 3px solid #000;
    background-color: #000;
    color: #fff336;
}
input[type="submit"]:hover:after {
  height: 100%;
}
input[type="submit"]:after {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

<div class="hs_submit">
    <div class="actions">
      <input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
    </div>
  </div>

The above button is the only button on my page and with the following above code, I'd expect it the black background to hover from bottom to top, but it's not - why?

Edit:

[Preview link to page][2]

Temani Afif · Accepted Answer · 2018-01-15T14:44:04.180

1

You don't have to use pseudo-element with input tag (Can I use a :before or :after pseudo-element on an input field?). Consider adding pseudo element on a container. Also remove the background of your input. It need to be transparent so you can see the effect of pseudo-element behind.

Here is an example:

.actions {
  display:inline-block;
  position:relative;
}

.hs-button {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  padding:20px;
  border:none;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}

.actions:hover input[type="submit"] {
    color: #fff336;
    background:transparent;
}

.actions:before {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index:0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.actions:hover::before {
  height:100%;
}

<div class="hs_submit">
    <div class="actions">
      <input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
    </div>
  </div>

edited Jan 15 '18 at 14:44

answered Jan 15 '18 at 09:27

Temani Afif

245,468
26
309
415

Hi Temani, I can see it working in your example, but when using the exact same approach in the actual template, it shows a basic button (with no styling) and nothing shows up when you inspect the hover property of the button. I've added a preview link in the question (which shows the original approach I had, to show how and where I want the button to appear). Can you maybe take a look at the code and review why your approach shows different results for me? – Freddy Jan 15 '18 at 09:49
@Freddy sure, one moment – Temani Afif Jan 15 '18 at 09:51
@Freddy i don't see any code ? you added my code or you kept yours ? as it's very different – Temani Afif Jan 15 '18 at 09:54
Yeah I added your code and then reverted it, just so you can get an idea of the ascetics I was going for. Check now, I'm using your code now – Freddy Jan 15 '18 at 09:58
@Freddy still don't see my code .. where it's added ? – Temani Afif Jan 15 '18 at 10:26
@Freddy oh i see ! you added it in a media query so only visible under 600px – Temani Afif Jan 15 '18 at 10:27
ah! how did I miss that! Does your approach only work if background is transparent on '.hs-button'? I need the button to have a '#fff336' and positioned to the right (inline with the text fields, as you hopefully saw in the original preview?). Is there a workaround the background issue? Also, the form extends when you hover on the button? – Freddy Jan 15 '18 at 10:40
@Freddy you can setup a background and then make it transparent on hover (i updated my solution) or we can use another pseudo-element to create the background. We can also use multiple background, etc :) so check if the easiest solution is suitable for your or not – Temani Afif Jan 15 '18 at 10:44
@Freddy it extends because you add border on hover .. you need to also to add them initially with a transparent color. or remove border and increase padding – Temani Afif Jan 15 '18 at 10:45
Thanks Temani! It's looking and working exactly as I want now! Just had one final follow-up question, is there a way to keep the button where it is now when the screen is sized down? (especially in mobile view). At the moment I've used 'margin' to position the button. From 1100px to 990px the button moves out the form? You can decide not to answer this, since you've already answered my question and helped me enough! – Freddy Jan 15 '18 at 11:03
@Freddy you want to keep in the center ? – Temani Afif Jan 15 '18 at 11:12
Nope, if you see the preview link, I want it exactly there, when resized. So on the rightest side, in line with the right side of the text fields. – Freddy Jan 15 '18 at 11:14
@Freddy ok so add this `margin: 0 22px 20px 21px; text-align: right;` to `hs_sumbit`... you will have the same margin as the input and then you align to make the button in the right – Temani Afif Jan 15 '18 at 11:15
1

Ah! It's nearly there, but I can work with the suggestions provided! Thank you Temani, for all your help! – Freddy Jan 15 '18 at 11:24

score 0 · Answer 2 · answered Jan 15 '18 at 09:28

0

input not support ::before ::after you can use <Button>

than add ::before ::after .

LIke https://jsfiddle.net/ufL55gfw/1/

answered Jan 15 '18 at 09:28

lalit bhakuni

607
5
15

vic · Answer 3 · 2018-01-15T09:51:16.267

Try below

 .slider-button {
  margin-top: 70px;
}

@media (max-width: 1220px) {
.slider-button {
    margin-top: 30px;
  }
}

.slider-button .button {
  text-align: left;
}

@media (max-width: 1220px) {
.slider-button .button {
    text-align: center;
  }
}
.slider-button .button {
    text-align: left;
}
.button {
  text-align: center;
}


.button a{text-decoration:none;}
.button__item {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 1.313rem;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  background: #fff336;
  padding: 32.5px 65px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.button__item:hover {
  text-decoration: none;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

.button__item:hover:after {
  height: 100%;
}

.button__item:after {
  content: "";
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

<div class="slider-button"><div class="button"><a href="#" class="button__item">DOWNLOAD NOW</a></div></div>

Hover transition from bottom to top on button not working

3 Answers3