Die gerichtet beleuchtete 3D-Taste ist ein Effekt, bei dem die Taste als 3D-Figur erscheint. Diese Schaltflächen werden mit HTML und CSS erstellt.

Ansatz: Der beste Weg, die HTML-Objekte zu animieren, besteht darin, CSS-Transformationen zu verwenden und die Transformationen in verschiedenen Phasen festzulegen.

  • Erstellen Sie eine HTML-Datei.
  • Verknüpfen Sie die CSS-Datei in HTML, die alle Effekte der Animation bereitstellt, mit unserem HTML.
  • Fügen Sie drei Anker- <a> -Tags zum Erstellen von Schaltflächen hinzu und weisen Sie ihnen bestimmte Klassen zu.

HTML Quelltext:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content
        ="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
        href="buttons.css" type="text/css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
  
<body>
    <div>
        <ul>
            <li id="like">
                <a href="#">
                    <i class="fa fa-thumbs-up"></i>
                    Like
                </a>
            </li>
            <li id="comment">
                <a href="#">
                    <i class="fa fa-comment"></i>
                    Comment
                </a>
            </li>
            <li id="share">
                <a href="#">
                    <i class="fa fa-share"></i>
                    Share
                </a>
            </li>
        </ul>
    </div>
</body>
  
</html>

CSS-Code: Das Folgende ist der Inhalt für die Datei „buttons.css“, die im obigen HTML-Code verwendet wird. CSS wird verwendet, um unserer HTML-Seite verschiedene Arten von Animationen, Transformationen und Effekten zu verleihen, damit sie für alle Benutzer interaktiv aussieht. Stellen Sie alle Browser-Effekte wieder her. Verwenden Sie Klassen und IDs, um Schaltflächen Effekte zuzuweisen. Verwenden Sie Transformationen, um gerichtet beleuchtete 3D-Schaltflächen zu erhalten.

buttons.css

*{
    margin: 0;
    padding: 0;
}
  
div{
    background: lightgreen;
    width: 100vw;
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, 
        Geneva, Verdana, sans-serif;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
ul{
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0;
}
  
a{
    text-decoration: none;
    color: rgba(0,0,0,0.7);
}
  
i{
    padding: 10px;
}
  
ul li{
    list-style: none;
    margin: 10px;
    display: block;
}
  
ul li a{
    width: 200px;
    height: 50px;
    background: orangered;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg) skewX(25deg);
    box-shadow: -20px 20px 8px;
    rgba(0,0,0,0.5);
}
  
ul li a:before{
    content:'';
    position:absolute;
    top:10px;
    left:-20px;
    background:orangered;
    height:100%;
    width:20px;
    transform:rotate(0deg) skewY(-45deg);
}
  
ul li a:after{
    content:'';
    position:absolute;
    bottom:-20px;
    left:-10px;
    background:orangered;
    height:20px;
    width:100%;
    transform:rotate(0deg) skewX(-45deg);
}
  
li a:hover{
    transform:rotate(-30deg) skew(25deg) translate(20px,-15px);
}

Ausgabe:

3D beleuchtete Tasten