CSS美化按钮设计代码示例

3星 · 超过75%的资源需积分: 10 173 浏览量更新于2024-09-20 收藏 5KB TXT 举报

"超好看的按钮 css实际的方便修改" 在网页设计中，CSS（层叠样式表）是一种强大的工具，用于定义HTML或XML文档中元素的样式，包括颜色、字体、布局以及页面的其他视觉效果。这个资源似乎提供了一种方法来创建美观且易于修改的CSS按钮。下面我们将详细讨论如何利用CSS实现这一目标。首先，我们看到`.btn`类，这是定义一个基本按钮样式的CSS选择器。它包含了按钮的基本外观属性： 1. `BORDER-RIGHT`和`BORDER-LEFT`: 分别设置了按钮左右边框的宽度和颜色，这里是1像素宽的#7b9ebd（一种淡蓝灰色）实线边框。 2. `BORDER-TOP`和`BORDER-BOTTOM`: 同理，设置顶部和底部边框，保持与左右边框一致。 3. `PADDING`: 定义了按钮内边距，使文字与边框之间有一定的空间，这里是2像素。 4. `FILTER:progid:DXImageTransform.Microsoft.Gradient`: 这是一个旧版IE浏览器的滤镜，用于创建从白色到#cecfde（浅灰色）的垂直渐变背景。现代浏览器通常使用`background-image`属性配合线性渐变实现相同效果。 5. `FONT-SIZE`: 设置字体大小，这里是12像素。 6. `CURSOR:hand`: 当鼠标悬停在按钮上时，光标形状变为手形，提示用户可点击。 7. `COLOR`: 设置文本颜色，这里是黑色。然后，我们有两个额外的状态选择器：`.btn1_mouseout`和`.btn1_mouseover`，它们分别对应于鼠标离开按钮和鼠标悬停在按钮上的状态。 1. `.btn1_mouseout`: 当鼠标移开按钮时，边框颜色变为#7EBF4F（一种亮绿色），背景色也改变为从白色到#B3D997（淡绿色）的渐变。这增加了交互反馈，让用户知道按钮状态的变化。 2. `.btn1_mouseover`: 鼠标悬停在按钮上时，边框颜色和渐变背景色保持不变，但这个状态下通常会添加额外的视觉效果，如高亮或者颜色变化，这里未给出具体变化，可能需要根据实际代码进行调整。总结来说，这个资源提供了创建具有动态效果的CSS按钮的方法，包括不同状态下的边框颜色、背景渐变以及光标形状等。通过修改这些样式属性，你可以轻松地自定义按钮的颜色、大小、边框样式等，以适应你的网页设计需求。对于那些不熟悉CSS的初学者，这是一个很好的起点，可以学习如何用CSS控制网页元素的视觉呈现。同时，为了更好的浏览器兼容性和性能，建议使用更现代的CSS语法，如渐变和过渡效果，而不是旧的滤镜。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现几组超酷的按钮_葡萄家园(www.putaojiayuan.com)</title>
<style>
.btn {
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid

下载后可阅读完整内容，剩余2页未读，立即下载

hengaoxingrenshini

粉丝: 1
资源: 25

CSS美化按钮设计代码示例

一个好看的CSS按钮样式

css选择按钮组

生产一个好看的按钮css

JSP怎么修改按钮样式

tailwindcss实现图片按钮和文字按钮

html如何把素材做成按钮,html botton html submit按钮表单控件与CSS美化

css 画4方位云台控制器

jsp中利用Jquery点击按钮弹出修改用户信息的好看的模态框

html 引入css/login-page/pc.css

css动态绑定style

最新资源