Home >Web Front-end >CSS Tutorial >Fade in button on hover using CSS

Fade in button on hover using CSS

王林forward: 2023-09-06 21:45:13975browse

使用 CSS 在按钮悬停时淡入

You can try running the following code to fade in button on hover using CSS

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .btn {
            background-color: orange;
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 16px;
            margin: 5px;
            opacity: 0.5;
            transition: 0.5s;
            display: inline-block;
            text-decoration: none;
            cursor: pointer;
         }
         .btn:hover {
            opacity: 2
         }
      </style>
   </head>
   <body>
      <button class = "btn">Result</button>
   </body>
</html>

The above is the detailed content of Fade in button on hover using CSS. For more information, please follow other related articles on the PHP Chinese website!

css

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：CSS grid gapNext article：CSS grid gap

See more

Fade in button on hover using CSS

Example

Related articles