How to make a Div box look 3D - html

Question

This is what I have so far:
<style type="text/css">
.signupsubmit {
line-height: 32px;
position: absolute;
left: 36px;
color: white;
top: 527px;
font-family: arial;
font-size: 17px;
font-weight: 600;
width: 137px;
height: 30px;
border-color: #00297A;
border-radius: 4px;
border: 1px solid black;
border-style: solid;
background-color: #FFB630;
text-indent: 30px;
}
<style>
<div class = "signupsubmit">Continue</div>
Can someone write an example of how to make the Continue button look 3D instead of 2D?

Answer 1

https://jsfiddle.net/zt2x0bct/
Just add a box-shadow. Probably the simpliest way:
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
Edit: Based on your comment, sounds like you are looking for a "gradient". See updated fiddle. You can also use an online gradient generator to help with this. Here's one that you can modify the "start" and "end" background color. Or you can click on the "showcase" and find a button that is close to what you are looking for:
http://css3button.net/

Answer 2

Thanks guys for all your help. I finally got the answer and I will be writing it down. Thanks Niloct for you guide on using inspect element.
<div class = "signupsubmit">Continue<div>
<style type = "text/css">
.signupsubmit {
webkit-appearance: none;
align-items: flex-start;
background-attachment: scroll;
background-clip: border-box;
background-color: #FFA500;
background-origin: padding-box;
background-size: auto;
border-bottom-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-top-color: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: #80B2FF 0px 1px 1px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
direction: ltr;
display: inline-block;
font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
font-size: 12px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
height: 31px;
letter-spacing: 1px;
line-height: 15.12px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 10px;
min-width: 194px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
position: relative;
text-align: center;
text-indent: 0px;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
text-transform: none;
width: 194px;
word-spacing: 0px;
writing-mode: lr-tb;
-webkit-writing-mode: horizontal-tb;
zoom: 1;
left: 37px;
top: 515px;
position: absolute;
}
</style>

Answer 3

I'm not sure about 3D but you can make it as though it is in a 3D environment with 'rotate' command.
.signupsubmit {
transform: rotateY(70deg) rotateX(70deg);
-webkit-transform: rotateY(70deg) rotateX(70deg);
transition: 2s;
line-height: 32px;
left: 36px;
color: white;
text-align: center;
top: 527px;
border: none;
font-family: arial;
font-size: 17px;
font-weight: 500;
width: 137px;
height: 30px;
border-radius: 2px;
background-color: #FFB630;
text-indent: 30px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
}
.signupsubmit:hover {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>

Answer 4

Copied from and credits goes to this
div {
transform:
perspective(75em)
rotateX(18deg);
box-shadow:
rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
border-radius: 10px;
border: 1px solid;
border-color:
rgb(213, 220, 226)
rgb(213, 220, 226)
rgb(184, 194, 204);
}