Como criar botões 3D com iluminação direcional usando CSS?
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
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva