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. Buttons can take us to other pages or perform actions such as submitting a form or making a purchase.

Your best bet for building? Button creation using CSS (cascading style sheets). CSS is a technique for defining and describing how elements in HTML are presented. Using a CSS editor, you may alter every component of your webpage, from headers and footers to sidebars and buttons. In this article, we will discuss about how to create directionally lit 3D buttons using CSS.

First, let’s see some of the CSS properties which we will require.

Font Awesome Icons

Font Awesome Free 5 is used in the font family so as to add icons of the type of file format beside the downloading links. It is used with the inline elements in CSS. Font Awesome is a library which contains list if thousands of icons designated for various things. Each icon has a unique Unicode value. The following are few examples of icons along with their codes.

fa fa-file-excel-o

Excel icon

fa fa-file-powerpoint-o

Powerpoint icon

fa fa-file-word-o

MS Word icon

The box-shadow property

The box-shadow property enables the developers to apply one or more shadow to an element. Multiple effects can be assigned simply by separating them by commas.

Syntax

box-shadow: value;

Values of this property are −

  • None- no shadow is displayed on the element. It is the default value.

  • Offset-X – how far the shadow should be pushed away from the element horizontally. Positive offset-X values cast a shadow on the element's right side. Negative values, on the other hand, move the element's shadow to the left.

  • Offset-Y – how much the shadow should be vertically distanced from the element. Positive offset-Y values produce a shadow above the element, whereas negative values provide a shadow below the element.

  • Blur-radius-it specifies the clarity of the shadow. The more is the number, more the shadow is blur which means the shadow will be bigger and lighter.

  • Spread- radius – it specifies the size of the shadow. If its value is positive, then the size increases. If it is negative, then the size decreases.

  • Color – it specifies the color of the shadow.

The :before pseudo selector

The :before CSS selector is used to insert something before the contents of an element.

The :after pseudo selector

The ::after CSS selector is used to insert something after the contents of an element. The content property specifies the content to be written after or before a selected element.

CSS Transform property

The coordinate space of the visual formatting model can be changed using the transform attribute in CSS. This is used to give components like skew, scale, rotate, and translate effects.

Syntax

transform: none| transform-functions| initial| inherit;

Values

  • 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) − It is used to define the rotational axis' angle.

  • scale(x, y) − The scale transformation along the X and Y axes is specified by this function.

  • scale3d(x, y, z) − Along the X, Y, and Z axes, the scale transformation is specified.

  • skew(angle, angle) − Along the X, Y, and Z axes, it defines the angle transformation. The skew transformation is defined along the X and Y axes, which are equivalent to the skew angles.

  • initial − Default value is set for the element.

  • inherit − It takes its parent element's value.

Steps to be Followed

  • Create three <a> elements for creating buttons and add different ids to them.

  • Give 3D effect to the buttons using nesting method and pseudo elements like :before and :after.

  • Add icons according to your choice using CSS Font awesome icons.

  • Using CSS transform property, give proper alignment to the buttons. Use box shadow property to add shadow to the button element.

Example

The given below example demonstrates how to create directionally lit 3D buttons.

<!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;
      }
      ul li {
         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">
            <a href= "#"> <i class= "fa fa-file-excel-o" style= "color:green"> </i> MS Excel </a>
         </li>
         <li id= "powerpoint">
            <a href= "#"> <i class= "fa fa-file-powerpoint-o" style= "color:red"> </i> Powerpoint</a>
         </li>
         <li id= "word"> <a href= "#"> <i class= "fa fa-file-word-o" style= "color:blue"> </i> MS Word </a></li>
      </ul>
   </div>
</body>
</html>

Conclusion

In this article, we have discussed about how to create directionally lit 3D buttons using CSS properties like transform, pseudo selectors, box-shadow property and font awesome icons.

Updated on: 20-Feb-2023

122 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements