Question 186367 in CSS Question posted in
Some basic documentation can be found here.

Css – Implementation of pomofocus button

how can I implement this div classes that change on-click?
Button animation

I tried to add border line but it doesn’t work to me.
border-width: 0 0 10px 0;
This code doesn’t change size of div.
Should it be new div or transition of the "button" div?

edit:
vue template code:

<button role="link" @click="handleClick" class="timerButton" :class="active ? ' active' : ' non-active'" >START</button>

css:
.active { border-width: 0 0 10px 0; }

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    this css code actually makes his job it is a solution:

    .active {
    transform: translateY(6px);
}

.non-active {
    box-shadow: rgb(235, 235, 235) 0px 6px 0px;
}

  2. 0

    I would transition the div using .classList.toggle(‘start’) and then apply padding-bottom and border of the same height…

    .start {
  padding-bottom: 20px;
  border-bottom: 20px solid gray;
}

    I’m guessing you already figured out how to change the words? Please include your code so we can help you better. I hope this works for you!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search