suchen

Heim >Web-Frontend >CSS-Tutorial >Schaltfläche zum Einblenden beim Hover mit CSS

Schaltfläche zum Einblenden beim Hover mit CSS

王林
王林nach vorne
2023-09-06 21:45:131031Durchsuche

使用 CSS 在按钮悬停时淡入

Sie können versuchen, den folgenden Code auszuführen, um mithilfe von CSS die Schaltfläche beim Hover einzublenden.

Beispiel

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>

Das obige ist der detaillierte Inhalt vonSchaltfläche zum Einblenden beim Hover mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：CSS-RasterlückeNächster Artikel：CSS-Rasterlücke

In Verbindung stehende Artikel

Mehr sehen