如何使用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按鈕？

回答

相關問題