I have a CSS button that looks like this:
我有一个CSS按钮,如下所示:
that is formed from this CSS code:
这是由这个CSS代码形成的:
.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):
这就是我想让它看起来像(但我无法弄清楚如何做到):
Please pardon my drawing skills. I just want to extend the orange border on the left so it looks 3D. Thanks!
请原谅我的绘画技巧。我只是想扩展左边的橙色边框,使它看起来像3D。谢谢!
4 个解决方案
#1
1
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;
}
#2
2
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
这是我在地方使用的3d按钮的小提琴。它使用css进行动画处理以具有活动和悬停状态
.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!
我希望有所帮助!
#3
0
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>#4
0
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>
#1
1
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;
}
#2
2
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
这是我在地方使用的3d按钮的小提琴。它使用css进行动画处理以具有活动和悬停状态
.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!
我希望有所帮助!
#3
0
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>#4
0
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>