如何仅使用CSS3创建具有立体质感的按钮？_行业百科

要使用纯CSS3打造立体质感按钮，可以使用盒模型、渐变、阴影等属性。以下是一个简单的示例：，，HTML代码：，``

html，，，，，，CSS3 立体按钮，，        .button {，            display: inlineblock;，            padding: 10px 20px;，            fontsize: 16px;，            fontweight: bold;，            color: #fff;，            background: lineargradient(to bottom, #3498db, #2980b9);，            border: none;，            borderradius: 5px;，            boxshadow: 0 2px 0 rgba(0, 0, 0, 0.2);，            cursor: pointer;，            outline: none;，        }，，        .button:hover {，            background: lineargradient(to bottom, #2980b9, #3498db);，        }，，        .button:active {，            boxshadow: none;，            transform: translateY(2px);，        }，，，，点击我，，，

``，，这段代码创建了一个具有立体质感的按钮，当鼠标悬停在按钮上时，背景颜色会发生变化；当点击按钮时，按钮会有按下的效果。

在现代网页设计中，使用纯CSS3打造立体质感按钮是一种常见且高效的方法，通过巧妙运用CSS3的各种属性，如渐变、阴影和伪元素，可以创建具有强烈视觉效果的3D按钮，下面将详细介绍如何利用纯CSS3实现这一效果。

基本样式设置

我们需要为按钮设置基本的样式，包括背景颜色、字体样式以及边框等。

.button {    backgroundcolor: #3bb3e0;    padding: 10px;    position: relative;    fontfamily: 'Open Sans', sansserif;    fontsize: 12px;    textdecoration: none;    color: #fff;    border: solid 1px #186f8f;    backgroundimage: lineargradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);}

添加立体感

为了增加立体感，我们可以使用::before伪元素来创建一个背景层，并通过阴影和渐变进一步增强效果：

.button::before {    content: "";    display: block;    position: absolute;    width: 100%;    height: 100%;    padding: 8px;    left: 8px;    top: 8px;    zindex: 1;    backgroundcolor: #ccd0d5;    borderradius: 5px;    boxshadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;}

鼠标悬停和点击效果

为了使按钮在鼠标悬停和点击时产生动态效果，我们可以使用:hover和:active伪类：

.button:hover {    backgroundimage: lineargradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);}.button:active {    paddingbottom: 9px;    paddingleft: 10px;    paddingright: 10px;    paddingtop: 11px;    top: 1px;    backgroundimage: lineargradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);}

完整代码示例

以下是完整的HTML和CSS代码示例：