CSS Transition with Button without Span Covering Text

Question

Anyone able to help me with a problem with a button effect using ::after? I have a problem with the ::after content being on top of the text for the button on hover.

JSFiddle: https://jsfiddle.net/pegues/yh4g2cme/

.button {
  position: relative;
  margin: 10px;
  padding: 16px 18px;
  color: #fff;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 1.00rem;
  line-height: 1.35rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  border: 0 none;
  background-color: #556f6e;
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
}
.button span {
  position: relative;
  z-index: 1;
  font-weight: inherit;
}
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 4px;
  height: 100%;
  content: ' ';
  background-color: #7cab4c;
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
}
.button:hover::after {
  width: 100%;
}

<br/>
<a class="button" href="#" title="" target="_blank"><span>With Span</span></a>
<a class="button" href="#" title="" target="_blank">Without Span</a>

If I wrap the text with a span inside the anchor tag, I can then add position: relative; z-index: 1; to that span and my problem is solved. But I cannot put a span in all anchor tags with .button throughout the site.

You might be better animating a background gradient on the button rather than a pseudo-element. — Paulie_D, Jul 31 '19 at 16:13
you need negative z-index on pseudo element and z-index 0 on the element: https://jsfiddle.net/7d9htbzw/1/ (related : https://stackoverflow.com/q/54897916/8620333) — Temani Afif, Jul 31 '19 at 20:10

doğukan · Accepted Answer · 2020-10-11T10:56:20.623

We can use ::before

.button {
  position: relative;
  margin: 10px;
  padding: 16px 18px;
  color: #fff;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 1.00rem;
  line-height: 1.35rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  border: 0 none;
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
}
.button::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #556f6e;
  z-index: -2;
}
.button::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 4px;
  height: 100%;
  background-color: #7cab4c;
  z-index: -1;
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
}
.button:hover::after {
  width: 100%;
}

<br />
<a class="button" href="#" title="" target="_blank"><span>With Span</span></a>
<a class="button" href="#" title="" target="_blank">Without Span</a>

Also background-size property can do that. Without pseudo element.

.button {
  position: relative;
  margin: 10px;
  padding: 16px 18px;
  display: inline-block;
  color: #fff;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 1.00rem;
  line-height: 1.35rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  border: 0 none;
  background: linear-gradient(#7cab4c, #7cab4c), #556f6e;
  background-size: 4px 100%;
  background-repeat: no-repeat;
  transition: all 0.20s ease-in-out;
}
.button:hover {
  background-size: 100% 100%, 100% 100%;
}

<a class="button" href="#" title="" target="_blank">Read More</a>

Negative z-index will create issues when you use different type layer or multiple element.Instead use background color transition. — Hanif, Jul 31 '19 at 16:15
Very interesting solution, but this didn't work for me. As @Hanif mentioned, this will create further issues. Thank you very much for sharing though! — Pegues, Jul 31 '19 at 16:23
It works great. Once @Pauli_D mentioned in their comment in the OP, it made sense to me. And that is what your second solution provides. Thank you and everyone else so much for all the help! And... this solution keeps ::before and ::after available for adding icons and other options. — Pegues, Jul 31 '19 at 16:50
@Pegues you can simplify the background solution like this: https://jsfiddle.net/7d9htbzw/ — Temani Afif, Jul 31 '19 at 20:08
and for the first issue, you can do with one pseudo element, simply use the correct z-index: https://jsfiddle.net/7d9htbzw/1/ — Temani Afif, Jul 31 '19 at 20:11

CSS Transition with Button without Span Covering Text

1 Answers1