<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实现的几个非常漂亮的按钮
CSS实现的几个非常好看的按钮! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效，有几个还挺实用的，分享给大家。 1、CSS3超酷3D弹性按钮 按钮实现非常简单 之前我们分享过几款不错的CSS3 3D立体按钮，比如5组可爱CSS3按钮、CSS3灰色按钮...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
通过使用HTML、CSS，每个按钮都有一个独特的ID，为每个按钮添加了一些样式，使其看起来更加美观和易于操作。接下来，我们使用CSS对按钮进行了一些美化处理，例如设置背景颜色、边框样式和字体大小等。我们还使用了...
按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？ 通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例 效果就更加震撼了...
推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery...
这是一款很特别的CSS3按钮，按钮整体是灰黑色主题，每一个按钮在按下时有非常漂亮的3D效果，并且按钮上的文字也有发光的特效。这款CSS3 3D按钮和之前介绍的几款按钮类似，都可以在点击按钮的时候让按钮悬浮下落，...
解压密码：RJ4587 最近我们刚刚为大家分享过几款非常漂亮的CSS3自定义样式的开关按钮，比如这款超清新的3款纯CSS3自定义Checkbox开关和纯CSS3灯光开关动画 自定义checkbox样式。这次要分享的同样是一款基于CSS3和SVG...
这是一款基于纯CSS3的图标组合，利用CSS3，我们基本可以在网页上绘制全部矢量图形，因为CSS3的出现我们可以...这款图标是黑色风格的，有几个复杂的图案需要用多层CSS代码才能实现，大部分图标的绘制还是比较简单的。
另外该CSS3进度条还可以切换多个主题样式，外观非常漂亮。 在线演示 源码下载 2、HTML5超具喜感的加载提示 转圈的胖娃娃 之前我们分享过几款HTML5/CSS3进度条加载插件，尤其是这款CSS3 3D进度条按钮确实是非常酷。...
这是一款基于CSS3的卡片图片动画，当我们将鼠标悬停在卡片上时，卡片中的图片和文字就会以不同的动画方式切换分离，然后弹出几个漂亮的分享按钮，你可以点击分享按钮分享这张卡片的内容。图片文字切换的动画是通过...
我们经常会在游戏里看到一些几张卡牌左右切换的效果，中间的一张最突出醒目，向左或向右滑动可切换到另一张，今天我们就用CSS3来实现下这种效果。 我们先来看个demo，具体的样式各位可以自己调整： （PC下可点击...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
不多逼逼，让我们来定几个期望 不用javascript脚本， 纯css 实现 不用添加新元素**（用after、before伪元素）** 不用类名匹配，直接用属性选择器**（[attr]）** 支持默认样式**（标签没定义主题、位置的时候）** ...
记得前几年手机版淘宝左下角有个狠有意思的圆形按钮，点击后会出现几个小按钮，并且出场动画很有意思，后面才知道这种效果叫“粘滞”效果，如图： 那这种效果到底用了什么属性呢？答案是主要用了filter:blur()...
1、首先我这里创建两个radio：（也可以多声明几个，这里的数据正常是动态获取的） <input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" /> <input type="radio" name...