Hover over div buttons with pseudo class doesn't sync correctly

Question

I'm trying to create a transition for both an div button and a pseudo element, but for some reason, these transitions appear to be out of sync with each other, resulting in the pseudo element reaching a background color before the div does. I've tried various combinations of style rules, but I never managed to accomplish an ease-in-out transition to work correctly.

.tracking__history {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.skew-btn-left {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    font-size: 20px;
    color: #2E8DEF;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-left: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
}
.skew-btn-left::after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: -5px;
    margin-left: -5px;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    border-right: 5px solid #13bcfa;
    
    transform-origin: top left;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
    transition: background 1s;
}

.skew-btn-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    margin-left: 40px;
    font-size: 20px;
    color: #13bcfa;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-right: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    transition: all .5s;
}
.skew-btn-right::after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: -5px;
    margin-left: -5px;
    background: #0000;
    border-top: 5px solid #13bcfa;
    border-bottom: 5px solid #13bcfa;
    border-left: 5px solid #13bcfa;
    
    transform-origin: bottom left;
    -ms-transform: skew(30deg, 0deg);
    -webkit-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}

div.skew-btn-right:hover,
div.skew-btn-left:hover,
div.skew-btn-right:hover.skew-btn-right::after, 
div.skew-btn-left:hover.skew-btn-left::after {
  background: #13bcfa;
}

.skew-btn-left a, .skew-btn-right a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0px;
    text-decoration: none;
    color: #13bcfa;
    text-transform: uppercase;
}

.skew-btn-left:hover a, .skew-btn-right:hover a {
    color: #fff;
}

<div class="tracking__history">
  <div class="skew-btn-left">
    <a href="">Tracking</a>
  </div>
  <div class="skew-btn-right">
    <a href="">History</a>
  </div>
</div>

Could you give more detail on the effect you want? If I run your snippet but with the transitions slowed down I can see that (some of) the background gets changed immediately while a small part goes slowly. — A Haworth, Jun 29 '22 at 19:06

AStombaugh · Accepted Answer · 2022-06-29T19:25:26.580

You're transitioning at different speeds, you're also transitioning all attributes which in this case involves things you aren't trying to transition on the pseudo-elements so they're lagging. Sync up your transitions and specify that you're targeting the color and background attributes and you should be good. I simplified your code a bit and if you don't want to transition the text color you can just remove it from the transition.

.tracking__history {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.skew-btn-left {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  text-decoration: none;
  color: #13bcfa;
  text-transform: uppercase;
  position: relative;
  width: 120px;
  font-size: 20px;
  background: white;
  border-top: 5px solid #13bcfa;
  border-left: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-left::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: -5px;
  margin-left: -2px;
  background: white;
  color: white;
  border-top: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  border-right: 5px solid #13bcfa;
  transform-origin: top left;
  -ms-transform: skew(30deg, 0deg);
  -webkit-transform: skew(30deg, 0deg);
  transform: skew(30deg, 0deg);
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  text-decoration: none;
  color: #13bcfa;
  text-transform: uppercase;
  position: relative;
  width: 120px;
  margin-left: 40px;
  font-size: 20px;
  background: white;
  border-top: 5px solid #13bcfa;
  border-right: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  margin-top: -5px;
  margin-left: -5px;
  background: white;
  color: white;
  border-top: 5px solid #13bcfa;
  border-bottom: 5px solid #13bcfa;
  border-left: 5px solid #13bcfa;
  transform-origin: bottom left;
  -ms-transform: skew(30deg, 0deg);
  -webkit-transform: skew(30deg, 0deg);
  transform: skew(30deg, 0deg);
  transition: background 0.5s linear, color 0.5s linear;
}

.skew-btn-right:hover,
.skew-btn-left:hover,
.skew-btn-right:hover.skew-btn-right::after,
.skew-btn-left:hover.skew-btn-left::after {
  background: #13bcfa;
  color: white;
  transition: background 0.5s linear, color 0.5s linear;
}

<div class="tracking__history">
  <a class="skew-btn-left" href="">Tracking</a>
  <a class="skew-btn-right" href="">History</a>
</div>

@ITgoldman you're right, I messed up the transition. It's fixed now — AStombaugh, Jun 29 '22 at 19:25

score 2 · Answer 2 · answered Jun 29 '22 at 20:12

Here is another idea with less of code:

.tracking__history {
  display: flex;
}

.tracking__history a {
  padding: 10px;
  position: relative;
  z-index: 0;
  font-size: 20px;
  color: #13bcfa;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: .2s;
}
.tracking__history a:hover {
  color: #fff;
}

.tracking__history a:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 5px solid #13bcfa;
  transform: skewX(25deg); /* control the curvature here */
  transition: inherit;
}
.tracking__history a:hover:before {
  background: #13bcfa;
}

.tracking__history a:first-child {
  padding-right: 30px;
  margin-right: -5px;
  border-left: 5px solid #13bcfa;
}
.tracking__history a:last-child {
  padding-left: 30px;
  margin-left: -5px;
  border-right: 5px solid #13bcfa;
}

.tracking__history a:first-child:before {
  border-left: none;
  transform-origin: bottom;
}
.tracking__history a:last-child:before {
  border-right: none;
  transform-origin: top;
}

<div class="tracking__history">
  <a href="">Tracking</a>
  <a href="">History</a>
</div>

score 0 · Answer 3 · answered Jun 29 '22 at 18:47

I tried with your buttons, but couldn't. Maybe you'll find these button as a good alternative (needs customizing). From How do I create a trapezoidal button using CSS? and CSS Trapezoid Button With Solid Border

.trapezoid {
  width: 230px;
  text-align: center;
  height: 0;
  position: relative;
  border-right: 50px solid transparent;
  border-top: 40px solid #2963BD;
  border-left: 50px solid transparent;
  box-sizing: content-box;
  transition: all 1s;
}

.trapezoid span {
  position: absolute;
  top: -30px;
  left: 25%;
  color: #fff;
}

.trapezoid:hover {
  border-top-color: red;
}

.btn {
  width: 100px;
  height: 50px;
  background: red;
  float: left;
  transition: all 1s;
  color: white;
}

.rit {
  float: left;
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 100px solid transparent;
  transition: all 1s;
}

.wrapper:hover .btn {
  background: blue;
}

.wrapper:hover .rit {
  border-top-color: blue;
}

button 1:
<div class="trapezoid"><span>Trapezoid Button</span></div>
<hr> button 2:
<span class="wrapper">
  <div class="btn">Content</div>
  <div class="rit"></div>
</span>

I have tried trapezoid border button but it's not the thing that I'm looking for, maybe i'm doing same mistake with pseudo hover effect — FeRRum Scripting, Jun 29 '22 at 18:51

Hover over div buttons with pseudo class doesn't sync correctly

3 Answers3