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

王林

リリース： 2023-09-06 21:45:13

転載

980 人が閲覧しました

使用 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

前の記事：CSSグリッドギャップ次の記事：Google AMP で検索するときにリッチコンテンツの候補を自動的に提供するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事