CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 731

CSS Change color of border twice while giving it a left to right effect

I want to combine two animations in order to achieve a bottom border that turns to white and fills from left to right and then goes back to the initial color giving the effect that the white line dissapears.

I found this pen that shows how I want the white line to show up (it's the third button, curmudgeon). It should dissapear from left to right too. https://codepen.io/lesbaa/pen/dojGVL

I created the border changing colors in steps in the code below.

body {
  background: grey;
}

.box {
  width: 150px;
  height: 50px;
  background: #161a1c;
  border-bottom: 2px solid #1f262d;
}

.box:hover {
  animation: line 1s;
}

@keyframes line {
  50% {
    border-bottom: 3px white solid;
  }

}
<div class="box"></div>

Any ideas how I could achieve this? Assuming it's even possible.

Upvotes: 3

Views: 1869

Answers (2)

Temani Afif
Temani Afif

Reputation: 273428

You can use linear-gradient and adjust background-size/background-position on hover:

body {
  background: grey;
}

.box {
  width: 150px;
  height: 50px;
  background-image:linear-gradient(#fff,#fff);
  background-position:bottom left;
  background-size:0% 2px;
  background-repeat:no-repeat;
  background-color:#161a1c;
  transition:
   background-size 1s, /*animate the background-size*/
   background-position 0s 1s; /*don't animate position and add a delay */
}

.box:hover {
  background-position:bottom right;
  background-size:100% 2px;
}
<div class="box"></div>

UPDATE

You can also do it like this:

body {
  background: grey;
}

.box {
  width: 150px;
  height: 50px;
  background-image:linear-gradient(#fff,#fff);
  background-position:200% 100%;
  background-size:200% 2px;
  background-repeat:no-repeat;
  background-color:#161a1c;
  transition:0s;
}

.box:hover {
  background-position:-100% 100%;
  transition:all 1s;
}
<div class="box"></div>

Upvotes: 2

Weafs.py
Weafs.py

Reputation: 22992

You can achieve this using a :pseudo-element and transition.

body {
  background: #444;
}
.box {
  display: block;
  position: relative;
  width: 150px;
  height: 50px;
  background: #161a1c;
  border-bottom: 2px solid #1f262d;
  overflow: hidden;
}
.box::after {
  content: '';
  position: absolute;
  width: 145%;
  height: 3px;
  bottom: 0;
  left: -145%;
  background: linear-gradient(to right, #1f262d 0%, white 45%, white 100%);
  z-index: 1;
  transition: left 0s;
}
.box:hover::after {
  left: 145%;
  transition: left 1s ease-in;
}
<div class="box"></div>

Upvotes: 3

Related Questions