Script HTML|CSS: CSS 3D Flip Button Hover Effects
Salut, de aici poți descărca script-uri HTML și CSS total gratuit. Pentru astăzi am pregătit un efect 3D a unui buton. Sper sa iti placa.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>3D Button </title>
<meta charset=”utf-8″>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<a href=”#”><span>BUTTON</span></a>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #49c6ff;
}
a {
position: relative;
padding: 20px 40px;
background: #058d9e;
color: #fff;
text-transform: uppercase;
font-family: sans-serif;
text-decoration: none;
letter-spacing: 4px;
transform-style: preserve-3d;
transition: ease-in-out 2s;
border-radius: 60px;
}
a:hover
{
transform: rotateX(360deg);
}
a span
{
display: block;
font-weight: bold;
transform-style: preserve-3d;
transform: perspective(100px) translateZ(20px);
}
a:before
{
content: ”;
position: absolute;
top: 4px;
left: 6px;
right: 6px;
bottom: 4px;
border: 2px solid #fff;
transform-style: preserve-3d;
transform: perspective(500px) translateZ(15px);
border-radius: 60px;
}
a:after
{
content: ”;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border: 2px solid #fff;
transform-style: preserve-3d;
transform: perspective(500px) translateZ(-15px);
border-radius: 60px;
}
Sau poți descărca de aici un fișier RAR care contine animatia!