Top 30 CSS Practice Exercises for Advanced with Solutions

21. Style a button with liquid effects that ripple when hovered.

Expected Output:

Hovering over the button creates a liquid ripple effect.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the liquid ripple effect */ </style> </head> <body> <button class="liquid-button">Hover Me</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

22. Create a CSS-only tab navigation system.

Expected Output:

Clicking on each tab displays its corresponding content while hiding the others.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the tab navigation system */ </style> </head> <body> <div class="tabs"> <input type="radio" id="tab1" name="tab" checked /> <label for="tab1">Tab 1</label> <div class="content">Content for Tab 1</div> <input type="radio" id="tab2" name="tab" /> <label for="tab2">Tab 2</label> <div class="content">Content for Tab 2</div> <input type="radio" id="tab3" name="tab" /> <label for="tab3">Tab 3</label> <div class="content">Content for Tab 3</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

23. Design a card layout where content slides up on hover.

Expected Output:

Hovering over the card slides up additional content.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the sliding card effect */ </style> </head> <body> <div class="card"> <div class="image">Image</div> <div class="content">Extra Content</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

24. Build an animated loading skeleton screen for content placeholders.

Expected Output:

A skeleton screen animates to simulate loading.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the loading skeleton */ </style> </head> <body> <div class="skeleton"> <div class="skeleton-item"></div> <div class="skeleton-item"></div> <div class="skeleton-item"></div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

25. Create a CSS-only hover effect that reveals a blurred background image.

Expected Output:

Hovering over the div reveals the blurred background.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the hover reveal effect */ </style> </head> <body> <div class="hover-reveal">Hover Me</div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

26. Design a pulsating ring animation around an element.

Expected Output:

The ring around the button pulses continuously.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the pulsating ring effect */ </style> </head> <body> <div class="pulsating-ring"><button class="button">Click Me</button></div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

27. Style a gradient mask effect that gradually reveals text.

Expected Output:

The text appears gradually from left to right through a gradient mask.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the gradient mask effect */ </style> </head> <body> <h1 class="gradient-text">Gradually Revealed Text</h1> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

28. Build a full-page CSS-only modal with an overlay effect.

Expected Output:

Clicking the button opens a modal that occupies the entire screen with an overlay.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to style the full-page modal */ </style> </head> <body> <button id="open-modal">Open Modal</button> <div class="modal-overlay"> <div class="modal-content">This is a full-page modal!</div> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

29. Implement a button with a bouncing animation using keyframes.

Expected Output:

The button bounces continuously.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the bouncing animation */ </style> </head> <body> <button class="bouncing-button">Bounce</button> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

30. Create a CSS-only animation where text follows a circular path.

Expected Output:

The text moves in a circular path.

Code In Css

<!DOCTYPE html> <html> <head> <style> /* Add CSS here to create the circular animation */ </style> </head> <body> <div class="circle-container"> <p class="circle-text">Rotating Text Around Circle</p> </div> </body> </html>

Document

To view the HTML changes, please type the code within the editor

Need help ?

Click on Hint to solve the question.

3 of 3