几个漂亮的Button的CSS
<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>
<button class="btn" title="好看的按钮">好看的按钮</button><p></p>
<button class="btn1_mouseout" onmouseover="this.className='btn1_mouseover'" onmouseout="this.className='btn1_mouseout'"
title="好看的按钮">好看的按钮</button>
<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>
分享到:
相关推荐
CSS实现的几个非常漂亮的按钮CSS实现的几个非常漂亮的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助 canvas 了,比如下面这个 案例 效果就更加震撼了...
几个风格好看的CSS3单选复选按钮美化样式,简单的表单单选框、复选框美化代码。 <!DOCTYPE HTML> <html> <head> <title>好看的CSS3单选复选按钮美化样式</title> <link rel=...
蚂蚁按钮颜色 Ant Design的简单按钮可响应更多颜色,例如默认,主要,成功,警告,信息,深色,浅色。 特征 按钮的颜色更多(主要,成功,...import 'antd-button-color/dist/css/style.css' ; // or 'antd-button-c
不多逼逼,让我们来定几个期望 不用javascript脚本, 纯css 实现 不用添加新元素**(用after、before伪元素)** 不用类名匹配,直接用属性选择器**([attr])** 支持默认样式**(标签没定义主题、位置的时候)** ...
样式表在几个地方都有!important 。 作为主题作者,我不想写如下内容: .mejs-container .mejs-controls .mejs-button button { width: 100px !important; } 这个项目的作用是为您提供一种更简单的方法来处理这...
showFew:2, //显示几个,就不用调css了,默认显示一个 clearance:50, //容器之间的间隙,默认为 0 silderMode:'linear' ,//滚动方式 timeGap:650,//动画间隙,完成一次动画需要多长时间,默认700ms buttonPre:'....
showFew:2, //显示几个,就不用调css了,默认显示一个 clearance:50, //容器之间的间隙,默认为 0 silderMode:'linear' ,//滚动方式 timeGap:650,//动画间隙,完成一次动画需要多长时间,默认700ms buttonPre:'....
1.2 CSS的几种设置方式 1 1.2.1 内联样式表 1 1.2.2 嵌入样式表 2 1.2.3 外部样式表 2 1.2.4 输入样式表 3 1.3 样式规则的选择器 3 1.3.1 Html selector 3 1.3.2 class selector 3 第 2 章 JAVASCRIPT的语法 5 2.1 ...
山姆SAM 用于简单属性模块几天前,我的一个朋友向我介绍了 。 创建一个 js 来包装 jquery 并覆盖一些方法,例如 addClass / removeClass / hasClass用例SAM('am-button') === $('[am-button=""]') SAM('am-button *=...
有几个带有实施的子项目,您可以通过下面的链接找到详细信息: 成分 UX / UI HTML + CSS React 角度的 间隔单位 :check_mark_button: :check_mark_button: :check_mark_button: :check_mark_button: 影像...
<button class="hide" type="button">Hide me</button> <p>Contact: Helen Bennett Garden House Crowther Way London <h3>Paris Trading <button class="hide" type="button">Hide me</button> <p>...
这是一个Js / UI / UX项目,我将使用它输入几个名称,它创建了一个由队长和共同队长(随机选择)组成的团队。 此外,还将添加一个随机生成的团队名称(以增加幽默感并保持用户参与度)。立即待办事项: 固定Flexbox...
项目后台是MVC1.0开发的,但是前端部分已经改过几个版本,而已之前的设计师很强大,又做设计又做前端开发。而已很时尚和前沿,使用了一直都很热门的Bootstrap工具包,有很多把它定义为Web前端CSS框架。说实话,之前...
.btn-toolbar(有助于几组btn-group结合到一个btn-toolbar中)/.btn-group(btn-group-lg/btn-group-sm/btn-group-xs)/.btn-group-vertical 容器内的按钮,可以使用button元素,也可以使用a元素,产生的效果是一样的。...
:check_mark_button: 安装程序包并将其添加到应用程序 :check_mark_button: 添加CSS预处理器(SASS) :check_mark_button: 设计一个可爱的用户界面 :check_mark_button: 创建组件(目录,卡片,详细信息...) :check...
ie_favicon 你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML...
你只需要一个漂亮的ico格式图片,您的地址栏IE图标将与众不同 favorite_menu 为DW增加一个Favorites 菜单,类似IE收藏夹 layer_transitions 层的多种转换特效 dhtml_tooltips 为页面或链接增加一个dHTML的脚注(即...
-现在将ExtJS的JavaScript文件拆成如下几个部分:core、foundation、form、grid、menu、tab、tree,页面按需下载其中的一些文件。 -将一个大文件分成几个小文件下载,也充分发挥了浏览器并行下载的特性,为更快的...