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

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 >
  <div >
    <a href="">Tracking</a>
  </div>
  <div >
    <a href="">History</a>
  </div>
</div>

CodePudding user response：

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 >
  <a  href="">Tracking</a>
  <a  href="">History</a>
</div>

CodePudding user response：

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 >
  <a href="">Tracking</a>
  <a href="">History</a>
</div>

CodePudding user response：

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 ><span>Trapezoid Button</span></div>
<hr> button 2:
<span >
  <div >Content</div>
  <div ></div>
</span>