Wie man einen 3D-button mit CSS?

Ich habe einen CSS-button, der so aussieht:

das gebildet wird aus dieser 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;
}

Dies ist, was ich versuche zu machen es so Aussehen (aber ich kann nicht herausfinden, wie es zu tun):
Wie man einen 3D-button mit CSS?

Bitte entschuldigen Sie meine zeichnerischen Fähigkeiten. Ich möchte nur zu verlängern den orangefarbenen Rahmen auf der linken Seite, so sieht es aus in 3D. Danke!

border-left: 5px solid orange; auf Button ?
es nicht ganz 3D-look, weil die Obere linke Ecke sollte auf einen Winkel (schlechtes Beispiel: jsfiddle.net/BsGuu)

InformationsquelleAutor user176105 | 2013-05-13

border css

Dies ist in der Nähe, aber nicht ganz perfekt.

Mit 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/

InformationsquelleAutor Kevin Boucher

Hier ist ein Turnschuh, die für ein 3d-button, den ich dort eingesetzt. Es ist animiert mit css eine aktive und hover-Zustand

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

Ich hoffe, das hilft!

InformationsquelleAutor Jeremythuff

Würden Sie gerne auf diesem Weg versuchen:

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

CSS:

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

HTML:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
<a href="javascript:void(0);">Push me!</a>

das ist ein tolles Beispiel, aber meine Website ist mehr minimalistischen und ich war versucht zu bleiben Weg von Schatten und andere details. trotzdem danke
Ich denke, das könnte Ihre mögliche endgültige Lösung: mburnette.com/blog/create-simple-faux-3d-css-button Es ist mit minimalistischen design und geringes Gewicht.
danke, aber die Schaltfläche ist ähnlich wie mir (ohne die fancy stuff). Ich war auf der Suche nach etwas, das einen Rahmen hat auf der linken Seite (wie Zeichnung)

InformationsquelleAutor Okay Lolz

Versuchen, Diese Ein Sie können die Größe es natürlich

<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>

InformationsquelleAutor rem0621

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.