如何使用CSS制作3D按钮？_Css_Border

如何使用CSS制作3D按钮？

css

如何使用CSS制作3D按钮？,css,border,Css,Border,我有一个CSS按钮，看起来像这样：由以下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; -web

我有一个CSS按钮，看起来像这样：

由以下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;
}

这就是我想让它看起来的样子（但我不知道怎么做）：

请原谅我的绘画技巧。我只想延长左边的橙色边框，使它看起来像3D。谢谢

您想这样做吗：

a{
位置：相对位置；
颜色：rgba（255，255，255，1）；
文字装饰：无；
背景色：rgba（219,87,5,1）；
字体系列：“Yanone Kaffeesatz”；
字号：700；
字号：3em；
显示：块；
填充：4px；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
-webkit盒阴影：0px 9px 0px rgba（219,31,5,1），0px 9px 25px rgba（0,0,0,7）；
-moz盒阴影：0px 9px 0px rgba（219,31,5,1），0px 9px 25px rgba（0,0,0,7）；
盒影：0px 9px 0px rgba（219,31,5,1），0px 9px 25px rgba（0,0,0,7）；
保证金：100像素自动；
宽度：160px；
文本对齐：居中；
-webkit过渡：所有.1s易用性；
-moz转换：所有.1秒轻松；
-ms过渡：所有.1秒轻松；
-o型过渡：所有。1秒容易；
过渡：全部1秒轻松；
}
a:主动的{
-webkit盒阴影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
-moz盒阴影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
盒影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
位置：相对位置；
顶部：6px；
}

这很接近，但不是很完美

使用

框阴影

和

边框

：

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

这是我在一些地方使用过的3d按钮的提琴。它使用css设置动画，以具有活动和悬停状态

我希望这有帮助

试试这个你当然可以调整大小

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


.按钮{
背景：黑色；
边界样式：开始；
边框宽度：4px；
边框颜色：白色；
边界半径：8px；
颜色：白色；
填充：8px 15px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
最小宽度：500px；
最小高度：100px；
}
.按钮：悬停{
边界样式：开始；
边框宽度：2倍；
盒影：无；
背景：黑色；

您可以使用MDN页面上的此示例来执行此操作。您可以通过在

.button container

中设置

透视原点

来更改视图。我的示例还设置了动画，以便单击按钮将显示运动。您可以使用

.side

中的转换功能来更改该视图


点击我

.button容器{
--尺寸：100px；
--调整：0px；
--红色口音：#B11807；
--深红色：#710F05；
--红色：#E31D09；
身高：100%；
透视图：700px；
透视原点：150%150%；
变换样式：保留-3d；
宽度：100%；
}
.按钮容器：活动{
--调整：100px；
}
.这边{
边界：无；
框大小：边框框；
显示：块；
高度：计算（变量（--尺寸）-变量（--调整））；
位置：绝对位置；
过渡：0.4s缓解；
宽度：计算（变量（--尺寸）-变量（--调整））；
}
.底部{
背景：var（--红色重音）；
转换：rotateX（-90度）translateZ（计算（变量（--尺寸）/2+var（--调整）/2）；
宽度：var（--尺寸）；
}
.按钮{
背景色：var（--红色）；
颜色：#FFFFFF；
高度：var（--尺寸）；
转换：translateZ（计算（变量（--维度）/2-var（--调整）/2）；
宽度：var（--尺寸）；
}
.左{
背景：var（--红-暗）；
高度：var（--尺寸）；
变换：旋转（-90度）平移Z（计算（变量（--尺寸）/2-变量（--调整）/2）；
}
.对{
背景：var（--红-暗）；
高度：var（--尺寸）；
变换：旋转（90度）平移（计算（变量（--尺寸）/2+变量（--调整）/2）；
}
.顶{
背景：var（--红色重音）；
转换：rotateX（90度）translateZ（计算（变量（--尺寸）/2-var（--调整）/2）；
宽度：var（--尺寸）；
}
.集装箱{
框大小：边框框；
填充：100px；
高度：300px；
宽度：300px；
}

左边框：5px纯色橙色；

在

按钮上

？@karthikr它看起来不太像3D，因为左上角应该在一个角度上（坏例子：）这是一个很棒的例子，但我的网站更简约，我试图远离阴影和其他细节。无论如何，谢谢。我想这可能是你可能的最终解决方案：它是设计和轻巧的简约。谢谢，但那个按钮与我的类似（没有花哨的东西）.我正在寻找左边有边框的东西（如图纸）。这是一个很好的资源，但我不认为它会像OP要求的那样添加一个有角度的边边框。你的是3D的，但在某种程度上观众就在它前面

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