Kevin Powell - Community•2mo ago

how to make border bottom color transition

https://codepen.io/Vicky-clowdy/pen/MWNXmRN I want that border bottom transition coming from center and to fill rest of border

Untitled

...

4 Replies

MarkBoots•2mo ago

not really easy to do with a inline element (no pseudo elements present), but with background images you can mock it up like a border and transition the size there are 2 backgrounds on top of each other: - the top (focus) starts 0% width - the back (default) is 100% width on transition, the top will grow to 100% so it covers the default color the variable names are quite long, with that I hope it's descriptive enough for you to understand here a working example: https://codepen.io/MarkBoots/pen/YzmvrjV

input {
  --border-bottom-size: 2px;
  --border-bottom-color: blue;
  --border-bottom-focus-color: red;
  --border-bottom-transition-duration: 0.5s;

  /* transparent border so it creates space for the background */
  border: none;
  border-bottom: var(--border-bottom-size) solid transparent;
  
  /* background to replace border */
  background-color: transparent;
  background-image: 
    linear-gradient(var(--border-bottom-focus-color) 0 0), /* top layer for focus border color */
    linear-gradient(var(--border-bottom-color) 0 0); /* back layer for default border color */
  background-size:
    0% var(--border-bottom-size), /* focus border 0% width */
    100% var(--border-bottom-size); /* default border 100% width */
  background-repeat: no-repeat; /* don't repeat */
  background-position: center bottom; /* place at bottom */
  background-origin: border-box; /* position relative to border-region */
    
  /* transition the focus border width */
  transition: background-size var(--border-bottom-transition-duration) ease;
}

input:focus {
  background-size: 100% var(--border-bottom-size); /* both borders full width */
}

input {
  --border-bottom-size: 2px;
  --border-bottom-color: blue;
  --border-bottom-focus-color: red;
  --border-bottom-transition-duration: 0.5s;

  /* transparent border so it creates space for the background */
  border: none;
  border-bottom: var(--border-bottom-size) solid transparent;
  
  /* background to replace border */
  background-color: transparent;
  background-image: 
    linear-gradient(var(--border-bottom-focus-color) 0 0), /* top layer for focus border color */
    linear-gradient(var(--border-bottom-color) 0 0); /* back layer for default border color */
  background-size:
    0% var(--border-bottom-size), /* focus border 0% width */
    100% var(--border-bottom-size); /* default border 100% width */
  background-repeat: no-repeat; /* don't repeat */
  background-position: center bottom; /* place at bottom */
  background-origin: border-box; /* position relative to border-region */
    
  /* transition the focus border width */
  transition: background-size var(--border-bottom-transition-duration) ease;
}

input:focus {
  background-size: 100% var(--border-bottom-size); /* both borders full width */
}

vicOP•2mo ago

Thanks but I used mui elements

MarkBoots•2mo ago

Thats something you should mention, also the codepen is not relevant. Please update. (you can also use codesandbox if that's easier) Im no expert in react and mui, but after a bit of searching: the default input already has the animating underline. To change its colors:

<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    ':after': { borderBottomColor: 'blue' },
  }}
/>

<Input
  sx={{
    ':before': { borderBottomColor: 'red' },
    ':after': { borderBottomColor: 'blue' },
  }}
/>

you coul;d also define themes, but that's totally out of my knowledge

vicOP•2mo ago

Thanks for it But do u think using mui slows down my project Or any other ui libraries

Gaming

Programming

how to make border bottom color transition