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

我有一个CSS按钮，看起来像这样：就是从这个CSS代码形成如何使用CSS制作3D按钮？

enter image description here

：

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

这是我想使它看起来像（但我不知道该怎么做）： enter image description here

请原谅我的绘画技巧。我只想扩展左边的橙色边框，使其看起来像3D。谢谢！

来源

2013-05-13 user176105

'左边框：5px的固体橙色;''上Button'？ – karthikr 2013-05-13 03:17:52

@karthikr它不太看3D，因为左上角应该是一个角度（坏例子：http://jsfiddle.net/BsGuu/） – user176105 2013-05-13 03:19:33

这是接近，但还不太完善。

使用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/

来源

2013-05-13 03:54:39

你想试试这个方法：

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>

来源

2013-05-13 03:21:14

这是一个很好的例子，但我的网站更简约，我试图远离阴影和其他细节。无论如何，谢谢 – user176105 2013-05-13 03:23:48

我认为这可能是你可能的最终解决方案： http://www.mburnette.com/blog/create-simple-faux-3d-css-button 它是极简设计和轻量级。 – 2013-05-13 03:34:39

谢谢，但那个按钮与我的相似（没有花哨的东西）。我正在寻找左边有边框的东西（如图纸） – user176105 2013-05-13 03:41:45

这里是一个3D按钮，我在地方使用的小提琴。它是用CSS动画有一个积极和悬停状态

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

我希望帮助！

来源

2013-05-13 04:10:59 Jeremythuff

试试这个，你可以调整它当然

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

来源

2018-01-26 15:55:29 rem0621

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

回答

相关问题