CODEWITHSUNDEEP
htmlcss
Leo L.
Leo L.

Reputation: 145

How to make a Div box look 3D

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?

Upvotes: 5

Views: 47522

Answers (4)

Kurkula
Kurkula

Reputation: 6762

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);
}

Upvotes: 2

Anthony
Anthony

Reputation: 11

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>

Upvotes: 1

prograhammer
prograhammer

Reputation: 20590

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/

Upvotes: 24

Leo L.
Leo L.

Reputation: 145

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>

Upvotes: 1

Related Questions