ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用したホバー時のフェードインボタン

CSSを使用したホバー時のフェードインボタン

王林
王林転載
2023-09-06 21:45:13975ブラウズ

使用 CSS 在按钮悬停时淡入

CSS を使用して、ホバー時にボタンをフェードインする次のコードを実行してみてください。

Example

ライブ デモ

<!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>

以上がCSSを使用したホバー時のフェードインボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。