O botão 3D direcionalmente iluminado é um efeito no qual o botão aparece como uma figura 3D. Esses botões são criados usando HTML e CSS.

Abordagem: a melhor maneira de animar os objetos HTML é usando transformações CSS e definindo as transformações em diferentes estágios.

  • Crie um arquivo HTML.
  • Vincule o arquivo CSS em HTML que fornece todos os efeitos da animação ao nosso HTML.
  • Adicione três tags âncora <a> para criar botões e atribua classes específicas a eles.

Código 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>

Código CSS: A seguir está o conteúdo do arquivo “buttons.css” usado no código HTML acima. CSS é usado para fornecer diferentes tipos de animações, transformações e efeitos à nossa página HTML para que pareça interativa para todos os usuários. Restaure todos os efeitos do navegador. Use classes e id's para dar efeitos aos botões. Use transformações para dar botões 3D iluminados direcionalmente.

*{
    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);
}

Saída:

Botões iluminados 3D