css好看的3d按钮效果 |css行内设置样式

首先，大家需要定义一个按钮的CSS样式：

.btn{
display:inline-block;
padding:10px 30px;
background:#C71585;
color:#fff;
border:none;
font-size:16px;
font-weight:bold;
text-shadow:none;
cursor:pointer;
border-radius:5px;
}

这里大家使用了display:inline-block让按钮可以在一行内显示，padding控制按钮内边距，background为按钮背景色，color为字体颜色，border为按钮边框，font-size为字体大小。

接着，大家为按钮加上鼠标悬停和点击效果：

.btn:hover{
background:#FF1493;
color:#fff;
}
.btn:active{
position:relative;
top:1px;
left:1px;
}

当鼠标悬停在按钮上时，大家改变了它的背景色和字体颜色，让它看起来更加活跃。同时，大家也为按钮添加了点击效果，让它有一点小小的“跳动”感觉。

现在，大家来加上3D效果：

.btn{
position:relative;
perspective:600px;
transform-style:preserve-3d;
}
.btn::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
opacity:0.2;
transform-origin:bottom;
transform:rotateX(90deg);
transition:all 0.3s ease-in-out;
}
.btn:hover::before{
opacity:0.4;
}
.btn:active::before{
opacity:0.1;
transform:rotateX(0);
}

大家为按钮添加了一个伪元素::before，并使用position:absolute让它覆盖在按钮上面。使用白色背景并设置透明度为0.2，让人看起来有一种反光的效果。接着，大家使用了perspective:600px属性，开启了3D视角，让大家的按钮有了立体感。transform-style:preserve-3d表示继承父容器的3d效果。

最后，大家使用了transform-origin:bottom和rotateX()属性，控制伪元素的翻转方向和角度。当鼠标悬停或点击按钮时，大家分别改变了伪元素的opacity和transform属性，让其产生反应。

通过这些CSS样式和技巧，大家成功制作了一个好看的3D按钮效果，让大家的网页看起来更加炫酷。