<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现的几个非常漂亮的按钮--建站学</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
}
</style>
</head>
<body>
<button class=btn title="好看的按钮">好看的按钮</button><P>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button>
<P>
<button
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'"
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button>
<P>
<button class=btn2 title="好看的按钮">好看的按钮</button>
<P>
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'"
onmouseout="this.className='btn3_mouseout'"
onmousedown="this.className='btn3_mousedown'"
onmouseup="this.className='btn3_mouseup'"
title="好看的按钮">好看的按钮</button>
<P>
<button class=btn_2k3 title="好看的按钮">好看的按钮</button>
</body>
</html>
分享到：
相关推荐
这个“CSS实现的几个非常漂亮的按钮.rar”压缩包中，很显然包含了利用CSS创建各种美观、吸引用户的按钮的示例代码。这些按钮不仅提升了用户体验，也对网页的整体视觉效果起到了关键作用。下面我们将深入探讨如何利用...
CSS实现的几个非常好看的按钮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
这个实例主要涉及以下几个核心知识点： 1. **CSS3伪类选择器**：在实现3D按钮时，我们通常会用到`:hover`、`:active`和`:focus`等伪类选择器，来改变按钮在不同状态下的样式，比如鼠标悬停、点击或获取焦点时的外观...
这里我们探讨的是几种经典的CSS按钮样式，这些样式可以为网页增添视觉吸引力并提升用户体验。 首先，让我们来看一下`<style>`标签内的CSS代码。这段代码定义了三种不同的按钮类：`.btn`, `.btn1_mouseout`, `.btn1_...
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效，有几个还挺实用的，分享给大家。 1、CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮...
【纯css3带动画效果的左右滑动按钮】是一种利用CSS3特性实现的交互式设计，主要用于创建具有平滑动画和视觉吸引...同时，这种纯CSS实现的滑动按钮也意味着更少的代码和更快的加载速度，对于优化网页性能具有积极意义。
这六个按钮边框动画可能包括但不限于以下几种效果： 1. **渐变边框**：当鼠标悬停在按钮上时，边框颜色逐渐变化，创造出平滑过渡的效果。 2. **旋转边框**：边框围绕按钮边缘旋转，增加动态视觉感。 3. **脉冲边框*...
总结起来，这个CSS3实现的灰色导航条按钮教程涵盖了以下几个关键知识点： 1. 使用`<ul>`和`<li>`构建导航条结构。 2. CSS3的`display: flex`用于创建水平排列的导航按钮。 3. 渐变背景（`linear-gradient`）为按钮...
在CSS3中，实现这种开关按钮特效的关键技术主要包括以下几点： 1. **伪类选择器**：CSS3的`:checked`伪类可以用来检测复选框或单选按钮的状态。当用户点击开关按钮时，对应的隐藏复选框会被选中或取消，从而触发...
例如，我们可能想要一个按钮在页面滚动时始终保持在视口的某个位置： ```css .button { position: fixed; bottom: 20px; right: 30px; } ``` 此外，`box-shadow`和`border-radius`等其他CSS3属性也能增强按钮的...
创建这样的开关按钮，我们需要关注以下几个关键的CSS3特性： 1. **伪类选择器**：CSS3中的`:checked`伪类允许我们根据复选框或单选按钮的状态改变元素的样式。在这个案例中，我们可以利用此属性来控制滑块的位置，...
总的来说，这个压缩包的内容很可能是几个示例文件，展示如何仅通过CSS3实现各种线条按钮的动画效果，同时可能还包含了如何结合JavaScript进行更高级的交互设计。开发者可以通过学习这些示例，了解和掌握如何在自己的...
在这个特定的资源包中，我们关注的是"水晶玻璃CSS按钮"，这是一种在Bootstrap基础之上进行的视觉增强设计。 水晶玻璃按钮的设计灵感来源于材料设计（Material Design）中的漂浮动作按钮（FAB），其特点是具有透明度...
从给定的HTML和CSS代码片段中，我们可以深入解析并学习到关于CSS样式的几个关键知识点，特别是关于按钮样式的设计。下面将详细解释这些知识点，包括样式定义、颜色与渐变效果的应用、阴影效果以及边框和内边距的设置...
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制和动画效果，极大地提升了用户体验。...所以，无论你是新手还是经验丰富的开发者，这个“漂亮的CSS3按钮样式集合”都是值得探索和收藏的宝贵资源。
在创建CSS按钮时，我们需要注意以下几个关键知识点： 1. **盒模型**：CSS盒模型是理解按钮尺寸设置的基础，包括content、padding、border和margin。调整这些属性可以改变按钮的大小和形状。 2. **背景色与边框**：...
"收集几款漂亮的CSS3按钮美化例子.rar"这个资源提供了多种不同风格的CSS3按钮设计，帮助开发者和设计师学习如何利用CSS3的新特性来提升按钮的视觉效果。 【描述】中提到的几个关键点： 1. **背景渐变**：CSS3引入...
创建Bubble气泡按钮主要涉及以下几个CSS属性： 1. **边框**：使用`border-radius`属性来设置按钮的圆角，使按钮看起来更像气泡。例如，`border-radius: 20px;`将创建一个20像素的圆角。 2. **背景色**：使用`...