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

orange.ro

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
orange.ro

Latest articles

Vodafone a anunțat Vodafone TV, un serviciu de televiziune digitală.

Vodafone inovează și lansează Vodafone TV. Vodafone TV e un serviciu de televiziune digitală. La baza acestiu serviciu stă un dispozitiv de...

PC Garage te echipează gratuit cu un SSD

PC Garage are o nouă campanie pe componente care e întitulată: „Te echipam gratuit: SSD cadou”! Pentru a participa...

iPhone 12 fără ecran de 120Hz

Ok. iPhone e unul dintre cele mai vândute telefoane, Apple are un profit uriaș, apple nu inovează în design-ul telefoanelor, deci economisește...

Cum activezi dark mode-ul pe Facebook?

Facebook a primit o nouă interfață pe desktop, una care conține și o temă întunecată, dar pe mobil, Facebook pare să fie...

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.