css立体感按钮-代码示例”

qianduancss

温馨提示:这篇文章已超过239天没有更新,请注意相关的内容是否还可用!

css立体感按钮-代码示例”

CSS立体感按钮是一种常见的按钮样式,它通过使用阴影和渐变效果,使按钮看起来具有立体感和凸起的效果。下面是一个示例代码,演示如何创建一个简单的CSS立体感按钮:

<!DOCTYPE html>

<html>

<head>

<style>

.button {

display: inline-block;

padding: 10px 20px;

font-size: 18px;

text-align: center;

text-decoration: none;

color: #fff;

background-color: #4CAF50;

border-radius: 6px;

box-shadow: 0 5px #357a3d;

transition: box-shadow 0.3s;

}

.button:hover {

box-shadow: 0 8px #357a3d;

}

.button:active {

background-color: #45a049;

box-shadow: 0 3px #357a3d;

transform: translateY(2px);

}

</style>

</head>

<body>

<a href="#" class="c795-b0d4-1280-03b9 button">立体感按钮</a>

</body>

</html>

在上面的示例代码中,我们首先创建了一个类名为"button"的样式。这个样式被应用于一个`<a>`标签,使其成为一个按钮。按钮具有一些基本的样式,如内边距、字体大小、文本对齐、文本装饰、文字颜色和背景颜色等。

接下来,我们使用`border-radius`属性来创建按钮的圆角效果,使其看起来更加平滑。然后,我们使用`box-shadow`属性添加按钮的阴影效果。`box-shadow`属性的第一个参数是水平偏移量,第二个参数是垂直偏移量,第三个参数是阴影颜色。

为了使按钮具有立体感,我们在按钮的`hover`状态下,将`box-shadow`属性的垂直偏移量增加,使阴影看起来更加明显。这样,当鼠标悬停在按钮上时,按钮就会有一个向上凸起的效果。

我们在按钮的`active`状态下,使用`background-color`属性改变按钮的背景颜色,同时将`box-shadow`属性的垂直偏移量减小,使按钮有一个向下凹陷的效果。我们还使用`transform`属性的`translateY`函数来向下移动按钮,以增强凹陷的效果。

通过这些CSS属性和伪类的组合使用,我们可以轻松地创建一个具有立体感的按钮样式。你可以根据自己的需求对按钮的颜色、大小和样式进行调整,以适应不同的设计风格和网页主题。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码