Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Directionally Lit 3D buttons using CSS?
Every part of your website is significant. Your website buttons are more than just decoration; they are crucial design elements that help tell a story about your business and direct people to your products or services. Although basic buttons are functional, you can go a step further and add fascinating effects, such as buttons that change colour when you hover over them, buttons with shadows, disabled buttons, or groups of buttons.
CSS allows you to create visually appealing 3D buttons with directional lighting effects using properties like transform, box-shadow, and pseudo-elements. These buttons appear to have depth and respond to user interactions with smooth animations.
Syntax
.button {
transform: rotate(angle) skew(x-angle, y-angle);
box-shadow: offset-x offset-y blur-radius color;
}
.button:before,
.button:after {
content: '';
position: absolute;
/* Additional properties for 3D effect */
}
Key CSS Properties
Box-shadow Property
The box-shadow property enables developers to apply one or more shadows to an element
| Value | Description |
|---|---|
| offset-x | Horizontal shadow position (positive = right, negative = left) |
| offset-y | Vertical shadow position (positive = down, negative = up) |
| blur-radius | Shadow blur amount (higher = more blur) |
| color | Shadow color |
Transform Property
The transform property modifies the coordinate space to create 3D effects
- rotate(angle) Rotates the element
- skew(x-angle, y-angle) Skews the element along X and Y axes
- translate(x, y) Moves the element from its original position
Pseudo-elements
The ::before and ::after pseudo-elements create additional layers for the 3D effect without adding extra HTML elements.
Example: Directionally Lit 3D Buttons
The following example creates 3D buttons with lighting effects using transforms and shadows
Note: This example uses Font Awesome icons. Include the CDN link in your HTML head section.
<!DOCTYPE html>
<html>
<head>
<title>Directionally Lit 3D Buttons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 50px;
flex-wrap: wrap;
justify-content: center;
}
.btn-3d {
position: relative;
width: 180px;
height: 80px;
background: #4CAF50;
border: none;
border-radius: 15px;
color: white;
font-size: 16px;
font-weight: bold;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-5deg) skewX(15deg);
box-shadow: -20px 20px 30px rgba(0,0,0,0.3);
transition: all 0.3s ease;
cursor: pointer;
}
.btn-3d:before {
content: '';
position: absolute;
top: 10px;
left: -15px;
height: 100%;
width: 20px;
background: #45a049;
border-radius: 15px 0 0 15px;
transform: skewY(-45deg);
}
.btn-3d:after {
content: '';
position: absolute;
bottom: -15px;
left: -5px;
height: 20px;
width: 100%;
background: #3d8b40;
border-radius: 0 0 15px 15px;
transform: skewX(-45deg);
}
.btn-3d:hover {
transform: rotate(-5deg) skewX(15deg) translate(10px, -10px);
box-shadow: -30px 30px 40px rgba(0,0,0,0.4);
}
.btn-excel {
background: #1D6F42;
}
.btn-excel:before {
background: #0F5132;
}
.btn-excel:after {
background: #0A3E26;
}
.btn-powerpoint {
background: #D04423;
}
.btn-powerpoint:before {
background: #B73E20;
}
.btn-powerpoint:after {
background: #A0381C;
}
.btn-word {
background: #2B579A;
}
.btn-word:before {
background: #1E4176;
}
.btn-word:after {
background: #173562;
}
.fa {
margin-right: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<a href="#" class="btn-3d btn-excel">
<i class="fa fa-file-excel-o"></i>
Excel
</a>
<a href="#" class="btn-3d btn-powerpoint">
<i class="fa fa-file-powerpoint-o"></i>
PowerPoint
</a>
<a href="#" class="btn-3d btn-word">
<i class="fa fa-file-word-o"></i>
Word
</a>
</div>
</body>
</html>
Three 3D buttons appear with skewed perspectives and directional shadows. Each button has a distinct color (green for Excel, red/orange for PowerPoint, blue for Word) with corresponding icons. On hover, the buttons lift up and cast larger shadows, creating an interactive lighting effect.
How It Works
-
Base Transform The main button uses
rotate()andskewX()to create perspective -
Pseudo-elements
::beforecreates the left side face,::aftercreates the bottom face -
Shadows
box-shadowwith negative offset creates the directional lighting effect -
Hover Animation
translate()on hover simulates button lifting with enhanced shadow
Conclusion
Directionally lit 3D buttons enhance user experience by providing visual feedback and depth. By combining CSS transforms, shadows, and pseudo-elements, you can create interactive buttons that appear to respond to lighting from a specific direction.
279 Views
