Menu

Tech

English

Button Hover Effect

Part of the CSS Mastery section of Coddy's HTML journey — lesson 41 of 43.

Challenge

Easy

A button is already in the HTML. Your goal is to make it scale up slightly when the user hovers over it. In the CSS, style the .cta-button so that:

It has a smooth transition transition: transform 0.3s ease;.
On hover, it slightly increases in size using transform: scale(1.05).

Try it yourself

<html>
<head>
  <title>Button Hover Effect</title>
  <style> 
    
    /* Add your styles here */
      .cta-button {
      background-color: #6a1b9a;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
    }

  </style>
</head>
<body>
    <button class="cta-button">Click Me</button>
</body>
</html>

All lessons in CSS Mastery

1Selector Mastery – Combination

Introduction Descendant Selector Child Selector Adjacent Sibling Selector General Sibling Selector Recap Challenge

4Dropdown Menu Project

Add the Submenu Show the Submenu More styling Input and button

7Build with CSS Grid

Grid Basics Grid-row Item Placement Named Areas Recap Challenge

2Interactive Pseudo-Classes

Pseudo-Classes Hover Effects Focus Effects Active Styles Recap Challenge

5Visual effects

Gradients CSS Filters Transform Transitions & Hover Effects Recap Challenge

8Flavor Fiesta website

Setting the grid Header The main part Footer

3Structural pseudo-classes

Structural pseudo-classes Targeting the First Child Targeting the Last Child Pattern Power: Using nth-child Recap Challenge

6Landing Page

Style the Header Section Style the button Section Layout Card Layout Add Finishing Touches

9Final Challenges

Highlight Active Menu Zebra Table RowsButton Hover EffectGrid Card Layout Blurred Hero Image