CODEWITHSUNDEEP
cssborder
user176105
user176105

Reputation: 221

How to Make a 3D button using CSS?

I have a CSS button that looks like this:

enter image description here

that is formed from this CSS code:

.Button{
 color: #333;
border: 1px solid orange;
border-bottom: 5px solid orange;
background-color: #fff;
font-size: 12px;
margin: 5px;
padding: 1px 7px 1px 7px;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
top: 0px;
}

.Button:hover{
cursor: hand; 
cursor: pointer;
}

.Button:active{
border-bottom: 3px solid #999;
top: 3px;
}

This is what I am trying to make it look like (but I can't figure out how to do it): enter image description here

Please pardon my drawing skills. I just want to extend the orange border on the left so it looks 3D. Thanks!

Upvotes: 7

Views: 37715

Answers (5)

Luke Ingalls
Luke Ingalls

Reputation: 99

You can do this using this example from the perspective page on MDN. You can change the view by setting the perspective-origin in .button-container. My example is also animated so that clicking on the button will show motion. You can change that using the transition function in .side.

JSFiddle

<div class="container">
  <div class="button-container">
    <div class="bottom side"></div>
    <div class="left side"></div>
    <div class="right side"></div>
    <div class="top side"></div>
    <button class="button side" type="button">Click Me</button>
  </div>
</div>

.button-container {
  --dimension: 100px;
  --adjustment: 0px;
  --red-accent: #B11807;
  --red-dark: #710F05;
  --red: #E31D09;

  height: 100%;
  perspective: 700px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
  width: 100%;
}

.button-container:active {
  --adjustment: 100px;
}

.side {
  border: none;
  box-sizing: border-box;
  display: block;
  height: calc(var(--dimension) - var(--adjustment));
  position: absolute;
  transition: 0.4s ease-out;
  width: calc(var(--dimension) - var(--adjustment));
}

.bottom {
  background: var(--red-accent);
  transform: rotateX(-90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
  width: var(--dimension);
}

.button {
  background-color: var(--red);
  color: #FFFFFF;
  height: var(--dimension);
  transform: translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
  width: var(--dimension);
}

.left {
  background: var(--red-dark);
  height: var(--dimension);
  transform: rotateY(-90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
}

.right {
  background: var(--red-dark);
  height: var(--dimension);
  transform: rotateY(90deg) translateZ(calc(var(--dimension) / 2 + var(--adjustment) / 2));
}

.top {
  background: var(--red-accent);
  transform: rotateX(90deg) translateZ(calc(var(--dimension) / 2 - var(--adjustment) / 2));
  width: var(--dimension);

}

.container {
  box-sizing: border-box;
  padding: 100px;
  height: 300px;
  width: 300px;
}

Upvotes: 0

rem0621
rem0621

Reputation: 13

Try This One you can resize it of course

<html>
<head>
<style>

.button {
    background: black; 
    border-style: outset;
    border-width: 4px;
    border-color: white;
    border-radius: 8px;
    color: white;
    padding: 8px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    min-width:500px;
    min-height: 100px;
}
.button:hover{
    border-style: outset;
    border-width: 2px;
    box-shadow: none;
    background: black; 

</style>
</head>
<body>

   <a href="#" class="button">Link Button</a>

</body>
</html>

Upvotes: 1

Okay Lolz
Okay Lolz

Reputation: 423

Would you like to try this way:

http://cssdeck.com/labs/fancy-3d-button

a {
  position: relative;
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
  background-color: rgba(219, 87, 5, 1);
  font-family: 'Yanone Kaffeesatz';
  font-weight: 700;
  font-size: 3em;
  display: block;
  padding: 4px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  -moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
  margin: 100px auto;
  width: 160px;
  text-align: center;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
a:active {
  -webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  -moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
  position: relative;
  top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
<a href="javascript:void(0);">Push me!</a>

Upvotes: 8

Jeremythuff
Jeremythuff

Reputation: 1548

Here is a fiddle for a 3d button I have used in places. It is animated with css to have an active and hover state

fiddle

 .btn-big {
 background-color: #474EDD;
 background-image: -webkit-linear-gradient(283deg, rgba(255, 255, 255, 0.1) 50%, transparent 55%),-webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), transparent);
 border-radius: 6px;
 box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 4px 0 0      #333797,0 4px 0 1px rgba(0, 0, 0, 0.4),0 4px 4px 1px rgba(0, 0, 0, 0.5);
 color: white !important;
 display: block;
 font-family: "Lucida Grande", Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
 height: 61px;
 letter-spacing: -1px;
 line-height: 61px;
 margin: 50px;
 position: relative;
 text-align: center;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
 text-decoration: none !important;
 -webkit-transition: all .2s linear;
 width: 186px;
 }

 .btn-big:active {
 background-color: #474EDD;
 top: 4px;
 box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 0 0 0      #333797,0 0 0 1px rgba(0, 0, 0, 0.4),0 0px 8px 1px rgba(0, 0, 0, 0.5);
 }

 .btn-big:hover {
 background-color: #5158E0;
 poisiton: relative;
 top: -1px;
 box-shadow: 0 0 0 1px #163772 inset,0 0 0 2px rgba(255, 255, 255, 0.15) inset,0 5px 0 0      #333797,0 5px 0 1px rgba(0, 0, 0, 0.4),0 5px 8px 1px rgba(0, 0, 0, 0.5);
 }

I hope that helps!

Upvotes: 7

Kevin Boucher
Kevin Boucher

Reputation: 16675

This is close, but not quite perfect.

Using box-shadow & border:

.Button {
    color: #333;
    box-shadow: -3px 3px orange, -2px 2px orange, -1px 1px orange;
    border: 1px solid orange;
}

http://jsfiddle.net/grYTZ/3/

Upvotes: 5

Related Questions