3D Menu Button List: A Step-by-Step HTML and CSS Tutorial @rayen-code

Rayen

In the world of web design, creating visually appealing and interactive navigation elements is essential. One way to achieve this is by crafting a 3D menu button list that not only guides users but also adds a touch of elegance to your website. In this tutorial, we'll walk you through the process of building a 3D menu button list using HTML and CSS. Elevate your web design skills and make your website stand out with this engaging element.




Step 1: HTML Markup:

Let's begin by setting up the HTML structure for your 3D menu button list.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Button Menu</title>

    <link rel="stylesheet" href="style.css">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>

    <ul>
        <li style="--i:6"><a href="#"><i class="fa-brands fa-html5"></i>HTML</a></li>
        <li style="--i:5"><a href="#"><i class="fa-brands fa-css3-alt"></i>css</a></li>
        <li style="--i:4"><a href="#"><i class="fa-brands fa-square-js"></i>java script</a></li>
        <li style="--i:3"><a href="#"><i class="fa-brands fa-bootstrap"></i>bootstrap</a></li>
        <li style="--i:2"><a href="#"><i class="fa-brands fa-react"></i>react js</a></li>
        <li style="--i:1"><a href="#"><i class="fa-brands fa-html5"></i>code</a></li>
    </ul>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (styles.css) to style the 3D menu button list and give it a 3D effect.
/*-------------------- CSS --------------------*/


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #777777;
}

ul {
    position: relative;
    transform: skewY(-15deg);
}

ul li {
    position: relative;
    list-style: none;
    width: 200px;
    background: #415c6f;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 10px;
transition: 0.5s;
z-index: var(--i);

}

ul li:hover{
    transform: translateX(50px);
    background: #00bb8f;
}

ul li::before {
    content: "";
position: absolute;
top: 0;
left: -50px;
width: 50px;
height: 100%;
transform-origin: right;
background: #384b57;
transform: skewY(45deg);
transition: 0.5s;

}
ul li:hover::before{
    background: #009774;
}

ul li::after{
    content: "";
    position: absolute;
left: 0;
top: -50px;
width: 100%;
height: 100%;
transform-origin: bottom;
background: #375163;
transform: skewX(45deg);
transition: 0.5s;
}
ul li:hover::after{
    background: #00a881;
}

ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    display: block;
    text-transform: uppercase;
    text-shadow: -2px -2px 1px black;

}

ul li a i {
    padding-right: 10px;
}

Congratulations! You've successfully created a stunning 3D menu button list using HTML and CSS. This engaging navigation element can add a touch of sophistication to your website and improve the user experience.

Implement this 3D menu button list on your website to guide users through your content in style. The skills you've gained from this tutorial will help you create more interactive and visually appealing web designs.


0 Comments