CSS Tutorials

Code for Transition

Code for Transition

Let's look at a straightforward example where we make a button's hover effect. The button will gracefully change in width and background color as the user hovers over it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transition Example</title>
    <style>
        .transition-button {
            padding: 10px 20px;
            background-color: #4CAF50; /* Green */
            color: white;
            border: none;
            transition-property: background-color, width;
            transition-duration: 0.5s;
            transition-timing-function: ease-in-out;
        }
        .transition-button:hover {
            background-color: #555; /* Darker gray */
            width: 150px; /* Increase width */
        }
    </style>
</head>
<body>
    <button class="transition-button">Hover over me!</button>
</body>
</html>

Explanation of code

HTML structure

  • A class transition-button is present in a single <button> element.

CSS Styling

  • Initial styles, such as padding, background color, and text color, are applied by.transition-button. Moreover, it describes the transition impacts.
  • The transition is applied to both the background-color and width properties when the browser uses the transition-property: background-color, width; command.
  • transition-duration: 0.5s; this specifies a half-second transition.
  • The ease-in-out transition timing mechanism makes sure the change begins softly, picks up pace in the middle, and then slows down once again at the finish.
  • The styles that change the button's background color and width when the mouse hovers over it are specified by the.transition-button:hover property.

logo

CSS

Code for Transition

Beginner 5 Hours

Code for Transition

Let's look at a straightforward example where we make a button's hover effect. The button will gracefully change in width and background color as the user hovers over it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transition Example</title>
    <style>
        .transition-button {
            padding: 10px 20px;
            background-color: #4CAF50; /* Green */
            color: white;
            border: none;
            transition-property: background-color, width;
            transition-duration: 0.5s;
            transition-timing-function: ease-in-out;
        }
        .transition-button:hover {
            background-color: #555; /* Darker gray */
            width: 150px; /* Increase width */
        }
    </style>
</head>
<body>
    <button class="transition-button">Hover over me!</button>
</body>
</html>

Explanation of code

HTML structure

  • A class transition-button is present in a single <button> element.

CSS Styling

  • Initial styles, such as padding, background color, and text color, are applied by.transition-button. Moreover, it describes the transition impacts.
  • The transition is applied to both the background-color and width properties when the browser uses the transition-property: background-color, width; command.
  • transition-duration: 0.5s; this specifies a half-second transition.
  • The ease-in-out transition timing mechanism makes sure the change begins softly, picks up pace in the middle, and then slows down once again at the finish.
  • The styles that change the button's background color and width when the mouse hovers over it are specified by the.transition-button:hover property.

Similar Data Science Tutorials

Related tutotials

Frequently Asked Questions for css

line

Mail us :

Address :

India

Categories

Copyrights © 2024 letsupdateskills All rights reserved