CSS animation border-bottom-CodePudding

I need to make the bottom border of these buttons smaller when clicked. I need these borders to look like this :hover when you click on them. I tried using :focus, but to no avail. Can someone help me?

.hb-border-bottom-br4 {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 10px 22px;
}

.hb-border-bottom-br4::after {
  display: block;
  content: '';
  border-bottom-width: 2px;
  border-color: #438C7B;
  transform: scaleX(1);
  transition: transform 300ms ease-in-out;
}

.hb-border-bottom-br4:hover::after {
  transform: scaleX(0.5);
}

<div >
  <div >
    <button  on:click={()=> video = 'video1'}>
                        Como usar a plataforma
                    </button>
  </div>
  <div >
    <button  on:click={()=> video = 'video2'}>
                        Como adquirir a licença
                        <br>
                    </button>
  </div>
</div>

CodePudding user response：

When you use the pseudo class, basically you're making a new element like a div for example... so to you use a border in this ::after, you first of all must set a width and a height...

But the most of the time, the people don't set a border in a ::after element, cause you can make that element looks a border only using width and heigth like:

p{
  font-size:20px;
  text-align: center;
  padding:10px;
  color: blue;
 }
 
 p::after{
 content:'';
 display: block;
   margin: 0 auto;
 width:10px;
 height:4px;
 background-color: red;
}

<p>Hello</p>

I hope helped you!

CodePudding user response：

It's unclear what you're trying to achieve, by the title of your question I assume you need an animated border for the buttons that gets smaller when you click them?

The border on the buttons is already small enough, and I don't think you need to shrink it even more. At this point, you might as well remove it entirely.

There is no "click" event in CSS but the closest thing to a click effect is :active.

Again, I am not sure what you're trying to achieve exactly but have a look at these two snippets bellow.

.hb-border-bottom-br4 {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 10px 22px;
  margin: 0px 0px 10px 0px;
  transition: 100ms;
}

.hb-border-bottom-br4::after {
  display: block;
  content: '';
  border-bottom-width: 2px;
  border-color: #438C7B;
  transform: scaleX(1);
  transition: transform 300ms ease-in-out;
}

.hb-border-bottom-br4:hover::after {
  transform: scaleX(0.5);
}

.hb-border-bottom-br4:focus {
  border-bottom: solid 5px #000000;
}

<div >
  <div >
    <button  on:click={()=> video = 'video1'}>
                    Como usar a plataforma
                </button>
  </div>
  <div >
    <button  on:click={()=> video = 'video2'}>
                    Como adquirir a licença
                    <br>
                </button>
  </div>
</div>

.hb-border-bottom-br4 {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  padding: 10px 22px;
  margin: 0px 0px 10px 0px;
  transition: 100ms;
}

.hb-border-bottom-br4::after {
  display: block;
  content: '';
  border-bottom-width: 2px;
  border-color: #438C7B;
  transform: scaleX(1);
  transition: transform 300ms ease-in-out;
}

.hb-border-bottom-br4:hover::after {
  transform: scaleX(0.5);
}

.hb-border-bottom-br4:active {
  border-bottom: solid 5px #000000;
}

<div >
  <div >
    <button  on:click={()=> video = 'video1'}>
                    Como usar a plataforma
                </button>
  </div>
  <div >
    <button  on:click={()=> video = 'video2'}>
                    Como adquirir a licença
                    <br>
                </button>
  </div>
</div>