如何创建3D按钮并使其可点击？

Question

我正在尝试为所有按钮应用3D效果。

我已经为我的3个按钮编写了以下CSS代码，有人能让我知道如何在按钮上应用3D效果吗？

button{
    height:60px;
    width:60px;
    border:none;
    background:#00ffff;
    color:#ff3300;
}

<button>1</button>
<button>2</button>
<button>3</button>

Answer 1

您在寻找box-shadow效果吗？

button{
  cursor:pointer;
  height:60px;
  width:60px;
  border:none;
  background:#00ffff;
  color:#ff3300;
  box-shadow:5px 5px 5px #888888;
}

button:active {
    box-shadow: 4px 4px 4px #666666;
}

<button>1</button>
<button>2</button>
<button>3</button>

你也可以使用:active选择器来寻找更复杂但更好看的东西：

button {
    cursor:pointer;
    color: black;
    background-color: #00ffff;
    padding: 15px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 9px 0px #00b3b3, 0px 9px 25px #00b3b3;
    -moz-box-shadow: 0px 9px 0px #00b3b3, 0px 9px 25px #00b3b3;
    box-shadow: 0px 9px 0px #00b3b3, 0px 9px 25px #00b3b3;
    margin: 40px;
    width: 140px;
    text-align: center;
    transition: all .1s ease;
    border:none;
    display:block;
}

button:active {
    -webkit-box-shadow: 0px 3px 0px #00b3b3, 0px 3px 6px #00b3b3;
    -moz-box-shadow: 0px 3px 0px #00b3b3, 0px 3px 6px #00b3b3;
    box-shadow: 0px 3px 0px #00b3b3, 0px 3px 6px #00b3b3;
}

<button>1</button>
<button>2</button>
<button>3</button>

或者对于“下推”3D按钮效果，请稍微修改上述代码：

button {
    cursor: pointer;
    position: relative;
    margin: 40px;
    width: 140px;
    text-align: center;
    color: black;
    display: block;
    border-radius: 8px;
    border: none;
    background-color: #00ffff;
    text-align: center;
    padding: 20px 30px;
  
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
  
    -webkit-box-shadow: 0px 9px 0px #00b3b3;
    -moz-box-shadow: 0px 9px 0px #00b3b3;
    box-shadow: 0px 9px 0px #00b3b3;
}

button:active {
    -webkit-box-shadow: 0px 2px 0px #00b3b3;
    -moz-box-shadow: 0px 2px 0px #00b3b3;
    box-shadow: 0px 2px 0px #00b3b3;
    top: 5px;
}

<button>1</button>
<button>2</button>
<button>3</button>

Answer 2

更改框阴影和阴影颜色以美化：

＆＃13;

＆＃13;

button{
	position:relative;
    height:60px;
    width:60px;
    border:none;
    background:#00ffff;
    color:#ff3300; 
	margin:5px;
	border-radius:7px 5px;
	outline: none;
	-webkit-box-shadow: 2px 9px 1px #94a1a5;
    -moz-box-shadow: 2px 9px 1px #94a1a5;
     box-shadow: 2px 9px 1px #94a1a5;
}
button:active{
    -webkit-box-shadow: 0px 2px 0px #ecd4d1;
    -moz-box-shadow: 0px 2px 0px #ecd4d1;
    box-shadow: 0px 2px 0px #ecd4d1;
    position:relative;
    top:7;
}

＆＃13;

<button>1</button>
<button>2</button>
<button>3</button>

＆＃13;

＆＃13;

＆＃13;