Question 246512 in Html Question posted in
Some basic documentation can be found here.

Html – How can I create a button with a 3d extrusion effect?

I’m making a navigation bar and I want a button that looks 3d.

body {
  background: #fff;
}

div {
   box-shadow: 5px 5px #202020;           
   background: #101010;
   border-radius: 5px;
   padding: 2rem;
   color: #fff;
   margin-top: 2rem;
}
<div>hello</div>

https://codepen.io/Jimothy104/pen/OJrxMYr

A bit like in this codepen but so that the corners extend to the box-shadow

I don’t really know how to so this so I’ve just used a box-shadow to start

Tags:

2

Answers


  1. 0

    You can add more shadow on it.

    body {
  background: #fff;
}

div {
  --shadow1: #383838;
  --shadow2: #000;
  box-shadow: 2px 2px 0 var(--shadow1), 4px 4px 0 var(--shadow1), 6px 6px 0 var(--shadow1), 8px 8px 0 var(--shadow1), 10px 10px 10px var(--shadow2), 12px 12px 10px var(--shadow2);
  background: #101010;
  border-radius: 5px;
  padding: 2rem;
  color: #fff;
  margin-top: 2rem;
}
    <div>hello</div>
    Login or Signup to reply.
  2. 0

    this is a button like a 3d button

    .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-bottom: 4px solid #2980b9;
            border-right: 4px solid #2980b9;
            border-radius: 5px;
            box-shadow: 0px 5px 0px 0px #2980b9, 5px 0px 0px 0px #2980b9;
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .button:hover {
            transform: translateY(2px);
            box-shadow: 0px 3px 0px 0px #2980b9, 3px 0px 0px 0px #2980b9;
        }
      <button class="button">Click Me</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search