3D Buttons iii

Developer
Srijon Sarker
Size
1,814 Kb
Views
6,072
  1. 3D Buttons iii Previews
  2. 3D Buttons iii HTML Codes
  3. 3D Buttons iii CSS Codes

How do I make an 3d buttons iii?

Starter pen for course “Practical Web Animation”. What is a 3d buttons iii? How do you make a 3d buttons iii? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

3D Buttons iii Previews
IQ Test

3D Buttons iii - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Buttons iii</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="main-nav"> <ul class="nav-list"> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>About Us</span></a></li> <li><a href="#"><span>Products</span></a></li> <li><a href="#"><span>Blog</span></a></li> <li><a href="#"><span>Contact Us</span></a></li> </ul>
</nav>
</body>
</html>

3D Buttons iii - Script Codes CSS Codes

body { font-family: sans-serif; padding: 0; margin: 0;
}
.main-nav { background-color: #333; color: white; width: 100%; height: 80px;
}
.nav-list { text-align: center; list-style: none; padding-left: 0; margin-top: 0;
}
.nav-list li { display: inline-block; width: 160px; height: 40px; margin: 10px 5px; text-align: center; position: relative;
}
.nav-list li a span { color: white; text-transform: uppercase; text-decoration: none; position: absolute; top: 0; left: 0; width: 160px; height: 40px; line-height: 40px; transform-origin: 0 0; transition: all .5s;
}
.nav-list li a:hover span { transform: scaleY(0.85); background-color: #444;
}
.nav-list li a::after { content: ""; background-color: #222; display: block; width: 156px; height: 40px; line-height: 40px; position: absolute; top: 0; left: 2px; color: white; text-transform: uppercase; transform-origin: 0 100%; transform: scaleY(0); transition: all .5s;
}
.nav-list li a:hover::after { transform: scaleY(0.15);
}
3D Buttons iii - Script Codes
3D Buttons iii - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 1,814 Kb
Views 6,072
Do you need developer help for 3D Buttons iii?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Springy popup card
Statics UI
Material Design Author Quote
Panels and Bullets
Calendar Widget
Material Profile UI Hover
CSS Slider
Lead Gen Button
Condition Based Checkbox
Flat Pricing Table
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!