Buttons: Designing Layered Styles with HTML and CSS @rayen-code

Rayen

Buttons are pivotal in user interactions, and their design can greatly impact a website's aesthetic. In this tutorial, we'll explore the creation of a stylish button with layered styles using HTML and CSS. This design technique adds depth and sophistication to your buttons, enhancing the overall user experience.




Step 1: HTML Markup:

Initiate the tutorial by setting up the HTML structure for your layered button. Create a container for the button, allowing flexibility for multiple layers and styles.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layer style Button</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span>Button</span>
    </button>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to apply the layered styles to the button. Utilize CSS positioning and box-shadow properties to achieve a layered effect.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #212121;
}

button {
    width: 100px;
    height: 30px;
    border: none;
    background: transparent;
    color: white;
    transform: rotate(-25deg) skew(25deg);
    cursor: pointer; 
}
button::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -5px;
    background: #2a2a2a;
    width: 100%;
    height: 10px;
    transform: skewX(-41deg);
}
button::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -9px;
    background: #2a2a2a;
    width:9px;
    height: 100%;
    transform: skewY(-49deg);
}
button span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2a2a2a;
    font-size: 25px;
    transition: 1s ease-out;
}

button:hover  span{
    z-index: 1000;
    transition: 0.3s;
}

button:hover span:nth-child(5) {
    transform: translate(40px, -40px);
    opacity: 1;
}
button:hover span:nth-child(4) {
    transform: translate(30px, -30px);
    opacity: 0.8;
}
button:hover span:nth-child(3) {
    transform: translate(20px, -20px);
    opacity: 0.6;
}
button:hover span:nth-child(2) {
    transform: translate(10px, -10px);
    opacity: 0.4;
}
button:hover span:nth-child(1) {
    transform: translate(0px, -0px);
    opacity: 0.2;
}

button:hover span {
    background: #5a5a5a;
}


button:active span:nth-child(5) {
    transform: translate(20px, -20px);
  
}
button:active span:nth-child(4) {
    transform: translate(15px, -15px);
  
}
button:active span:nth-child(3) {
    transform: translate(10px, -10px);
   
}
button:active span:nth-child(2) {
    transform: translate(5px, -5px);
   
}
button:active span:nth-child(1) {
    transform: translate(0px, -0px);
  
}
button:active span {
    cursor: grab;
}

Understand the concept of layers using the position property. The z-index values control the stacking order, creating a visually appealing layered effect.

Personalize the layered button by experimenting with different colors, opacities, and sizes for each layer. Adjust the button's styles to match the overall theme of your website.

0 Comments