Script-uri HTML|CSS: CSS 3D Flip Button Hover Effects

interlink.ro%20

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.

Pentru început adaugă urmatoarele rânduri într-un fișier 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>

După aceea, intr-un fișier CSS adăugați următoarele:

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!

Folosește cuponul de reducere QUICK456 pentru 3% reducere pe QuickMobile.ro3% reducere
Folosește cuponul de reducere QUICK456 pentru 3% reducere pe QuickMobile.ro
Cuponul QUICK456 îți aduce 3% reducere pe site-ul QuickMobile.ro indiferent de valoare comenzii. Reducerea se poate acumula și cu alte reduceri existente pe site.
QUICK456

Latest articles

TOP Smartphone-uri calitate-preț la eMAG de Black Friday

Ziua reducerilor a început la eMAG, iar reducerile continuă. Multe dintre produse au dispărut de pe stoc, dar asta nu înseamnă că...

Ești pregătit de Black Friday? Iată cele mai bune reduceri de pe eMAG

Mâine va avea loc unul dintre cele mai așteptate evenimente de către fanii reducerilor. Tu ești pregătit de Black Friday? Mai jos vei...

Black Friday la QuickMobile vine cu reduceri de până la 70% + 3% extra reducere cu cuponul QUICK456

QuickMobile este unul dintre magazinele mele preferate, iar acum câteva momente au anunțat cu oferta cu care vin în fața clienților de...

Epic Games Store oferă două jocuri gratuite cu temă de Halloween.

Epic Games Store oferă două jocuri gratuite cu temă de Halloween. Este vorba despre Layers of Fear 2 și Costume Quest 2.

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.