HTML Academy
Paper buttons, step 2
Smooth transitions11/29
Back to the list of tasks
  • 1. The transition-duration property
  • 2. Transition duration, step 2
  • 3. The transition-property: which properties can be changed smoothly?
  • 4. The transition-delay property
  • 5. The “form” of the transition, transition-timing-function
  • 6. transition-timing-function, step 2
  • 7. transition-timing-function, step 3
  • 8. transition-timing-function, step 4
  • 9. Paper buttons, step 1
  • 10. Paper buttons, step 2
  • 11. Paper buttons, step 3
  • 12. Checkboxes, step 1
  • 13. Checkboxes, step 2
  • 14. Checkboxes, step 3
  • 15. Radio buttons, step 1
  • 16. Radio buttons, step 2
  • 17. Radio buttons, step 3
  • 18. Toggle switches, step 1
  • 19. Toggle switches, step 2
  • 20. Toggle switches, step 3
  • 21. Toggle switches, step 4
  • 22. The transformer icon, step 1
  • 23. The transformer icon, step 2
  • 24. The transformer icon, step 3
  • 25. The transformer icon, step 4
  • 26. Text input field, step 1
  • 27. Text input field, step 2
  • 28. Text input field, step 3
  • 29. Text input field, step 4
Checkboxes, step 1
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Paper buttons, step 3

Great job! Now let’s add a more contrasting shadow to the active state of the buttons and change the text color. To do this, create a CSS rule with the following selector:

.paper-btn input:checked ~ label { ... }

Let’s animate the shadow of the box-shadow that appears in the active state using a smooth transition. We need to add the transition properties to the general CSS rule for the label:

.paper-btn label { ... }

Thus, the shadow will appear and disappear smoothly.

Comments

  • index.html
  • style.css
HTML
1
2
<!DOCTYPE html>
<html lang="en">
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CSS
1
2
.paper-btn {
display: inline-block;
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
GoalsCompleted 0 out of 2
    1. Set the text color to #f1f1f1 and the shadow size to 0 6px 20px 0 rgba(0, 0, 0, 0.4) for the active state of the buttons.
    2. And then assign a smooth transition to the box-shadow property that has a duration of 0.3s with the shape cubic-bezier(0.4, 0, 0.2, 1) to both buttons.

    Toggle the “True” and “False” buttons to test the result.

    1. Select the correct answer to the quiz question, and press the round button to check your answer.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.