How to create directional 3D buttons with CSS
How to Create Directional 3D Buttons with CSS
Every part of your website is important. Your website buttons are more than just decoration; they’re crucial design elements that help tell the story of your business and lead people to your products or services. While basic buttons are functional, you can go a step further and add engaging effects like buttons that change color when you hover over them, buttons with shadows, disabled buttons, or groups of buttons. Buttons can take us to other pages or perform actions like submitting a form or making a purchase.
What’s your best approach? Create buttons using CSS (Cascading Style Sheets). CSS is a technology that defines and describes how elements in HTML are rendered. Using a CSS editor, you can modify every component of a web page, from headers and footers to sidebars and buttons. In this article, we’ll discuss how to create directional 3D buttons using CSS.
First, let’s look at some of the CSS properties we’ll need.
Font Awesome icon
Font Awesome Free 5 is used in the font family to add an icon of the file format type next to the download link. It is used with an inline element in CSS. Font Awesome is a library that contains a list of thousands of icons designated for various things. Each icon has a unique Unicode value. Here are some examples of icons, along with their code.
| fa fa-file-excel-o | Excel icon |
|---|---|
| fa-file-powerpoint-o | Powerpoint icon |
| fa-file-word-o | MS Word icon |
Box-Shadow Property
The box-shadow property allows developers to apply one or more shadows to an element. Multiple effects can be assigned by separating them with commas.
Syntax
box-shadow: value;
The value of this property is –
- None – Displays no shadow on the element. This is the default value.
-
Offset-X – How far the shadow should be pushed away from the element horizontally. A positive Offset-X value casts the shadow to the right of the element. A negative value moves the shadow to the left of the element.
-
Offset-Y – How far the shadow should be placed vertically from the element. A positive Offset-Y value creates a shadow above the element, while a negative value creates a shadow below the element.
-
Blur-radius – This specifies the sharpness of the shadow. The higher the number, the blurrier the shadow, meaning it will appear larger and lighter.
-
**Spread** – Radius – This specifies the size of the shadow. If its value is positive, the size increases. If it is negative, the size decreases.
-
Color – This specifies the color of the shadow.
:before Pseudo-Selector
The :before CSS selector is used to insert something before an element’s content.
:after Pseudo-Selector
The ::after CSS selector is used to insert something after an element’s content. The content property specifies the content to be written before or after the selected element.
CSS Transform Properties
The coordinate space of the visual formatting model can be changed using the transform properties in CSS. This is used to give components effects such as tilt, zoom, rotation, and translation.
Syntax
transform: none| transform-functions| initial| inherit;
Value
- translate(x, y) – This function defines a translation along the X and Y coordinates.
-
translate3d(x, y, z) – This function provides a translation along the X, Y, and Z coordinates.
-
rotate(angle) – This function defines the angle of the rotation axis.
-
scale(x, y) – This function specifies a scale transformation along the X and Y axes.
-
scale3d(x, y, z) – This function specifies a scale transformation along the X, Y, and Z axes.
-
skew(angle, angle) – This function specifies an angular transformation along the X, Y, and Z axes. It specifies a skew transformation along the X and Y axes, equivalent to the skew angle.
-
initial – This function sets the default value for the element.
-
inherit – This function adopts the value of its parent element.
Steps to Follow
-
Create three elements to create buttons and give them different IDs.
-
Use nesting and pseudo-elements like :before and :after to give the buttons a 3D effect.
-
Use CSS Font Awesome Icons and add icons of your choice.
-
Use the CSS transform property to align the buttons appropriately. Use the box-shadow property to add a shadow to the button element.
Example
The following example demonstrates how to create a directional 3D button.
<!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/fontawesome.min.css">
<style>
*{
margin: 0;
padding: 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
background: #E1C16E;
margin: 0;
padding: 10px;
width: 99vw;
height: 98vh;
font-family: 'Times New Roman', Calibri,
Georgia, Verdana, serif;
position: relative;
}
ul {
position: absolute;
display: flex;
margin: 5px 5px;
padding: 2px 2px;
}
i {
padding: 11px;
}
a {
text-decoration: none;
color: white;
letter-spacing: 1px;
font-family: cursive;
}
ulli {
list-style: none;
margin: 15px;
display: block;
}
ul li a {
width: 150px;
height: 100px;
margin: 40px;
background: cyan;
display: flex;
font-size: 20px;
align-items: center;
border-radius: 10%;
justify-content: center;
transform: rotate(-25deg) skewX(30deg);
box-shadow: -35px 30px 20px white;
}
ul li a:before {
content: '';
position: absolute;
top: 15px;
left: -20px;
background: cyan;
border-radius: 10%;
height: 100%;
width: 25px;
transform: rotate(10deg) skewY(-55deg);
}
ul li a:after {
content: '';
position: absolute;
bottom: -20px;
left: -10px;
background: cyan;
border-radius: 10%;
height: 30px;
width: 98%;
transform: rotate(10deg) skewX(-60deg);
}
li a:hover {
transform: rotate(-25deg) skew(35deg) translate(18px, -19px);
}
</style>
</head>
<body>
<div>
<h1> 3D Buttons </h1>
<ul>
<li id="excel">
<i class= "fa fa-file-excel-o" style= "color:green"> </i> MS Excel
</li>
<li id="powerpoint">
<i class= "fa fa-file-powerpoint-o" style= "color:red"> </i> Powerpoint
</li>
<li id= "word"> <i class= "fa fa-file-word-o" style= "color:blue"> </i> MS Word </li>
</ul>
</div>
</body>
</html>
Conclusion
In this article, we discussed how to use CSS properties such as transforms, pseudo selectors, the box-shadow property, and font-super icons to create directional glowing 3D buttons.