askvity

How Do I Make Buttons Bigger on Hover in CSS?

Published in CSS Hover Effects 3 mins read

To make buttons bigger when you hover over them in CSS, you use the :hover pseudo-class along with a transformation property like transform: scale().

Making an element on your page expand when you hover over it is a common and engaging way to provide visual feedback to users. In CSS, you can achieve this effect on buttons easily.

Using the :hover Selector

The primary method involves targeting the button element specifically when the mouse cursor is over it. To do this, you use the :hover selector. This pseudo-class applies styles only when the element is being hovered over by the user's pointer.

Applying the Scaling Effect

Once the button is targeted by the :hover state, you need to apply a style that increases its size. The most common and performant way to do this is using the transform property with the scale() function.

According to the reference, the transform: scale(1.2); line tells the browser to scale the element up to 120% of its original size when the mouse hovers over it.

Here's a basic example:

button:hover {
    transform: scale(1.1); /* Makes the button 10% larger */
}

In this example, scale(1.1) increases the button's size by 10%. You can adjust the value 1.1 to any number greater than 1 (e.g., 1.2 for 20% larger, 1.5 for 50% larger) to control how much bigger the button becomes.

Adding Smoothness with Transitions

While the above code works, the size change will be instant and abrupt. For a smoother effect, you can add a transition property to the normal state of the button (not the :hover state). This tells the browser to animate the change over a specified duration.

button {
    transition: transform 0.3s ease; /* Smooth transition over 0.3 seconds */
}

button:hover {
    transform: scale(1.1); /* Makes the button 10% larger */
}

The transition: transform 0.3s ease; line means that any changes to the transform property (like scale) will animate over 0.3 seconds with a standard ease timing function.

Example Implementation

Here's a full HTML and CSS example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Hover Effect</title>
    <style>
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            transition: transform 0.3s ease; /* Smooth animation for transform */
        }

        button:hover {
            transform: scale(1.1); /* Button becomes 10% bigger on hover */
            /* You could also use scale(1.2) for 20% larger as mentioned in the reference */
        }
    </style>
</head>
<body>

    <h1>Hover over the button</h1>

    <button>Hover Me!</button>

</body>
</html>

This example creates a simple blue button that smoothly increases in size when you hover over it.

Key CSS Properties Used

Property Selector Description
:hover Button Targets the element when the mouse pointer is over it.
transform :hover Allows manipulation of an element's shape, size, or position.
scale() transform A function of transform that increases or decreases the size of an element.
transition Button Specifies how properties should be animated when they change.

By combining the :hover pseudo-class with transform: scale() and optionally adding a transition, you can easily make your buttons grow bigger on hover, enhancing user interaction and visual appeal.

Related Articles