简单按钮css样式,css怎么设置按钮点击样式

c#怎样用css样式来改变按钮

css设置按钮样式的方法：定义一个css选择器，然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮交互时样式。

button样式需要注意的有几点：

1、建议有一个最小宽度，以免在文字很少时使得按钮过于窄，宽高不协调；

2、建议有一个padding，以免内部文本显得过于拥挤；

2、hover时需要有颜色变化，以告诉用户这是一个可交互元素，更为灵动；

3、获得焦点时应与hover时的效果一致，释放焦点时则回到普通效果。

4、获得焦点时的outline建议去掉，否则较为难看。

普通状态样式设置：.btn{

min-width: 60px;

padding: 5px 8px;

background: #fff;

color: #4daff9;

border: 1px solid #4daff9;

}

交互状态(hover、focus)样式设置：.btn:hover{

color: #fff;

background: #0a90f5;

}

.btn:focus{

color: #fff;

background: #0a90f5;

outline: none;

}

相关问答

Q1: 用css写一个简单的按钮

button{ 

    width:70px;

    height:30px;

    color:#fff; 

    text-align: center; 

    background-color:#c00; 

    color:#fff;

    line-height: 28px;

    border-radius:15px; 

    border:0; 

    outline: 0; 

    transition: background 0.2s 

} 

button:hover{ 

    background:#666

}

buttonGo/button

Q2: 按钮用css 怎么写

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titletitle

style type="text/css"

.box {

width: 100px; height: 100px; position: relative;

}

.box a {

width: 100px; height: 100px; display: block; position: absolute; top: 0; left:0; background: #fff; filter:alpha(opacity=0);/* IE */ opacity:0; );/* FF */ 

}

.box a:hover {

width: 100px; height: 100px; display: block; background: url(111.jpg) no-repeat center center; filter:alpha(opacity=100); opacity:1;

}

CSS3代码

随着HTML5/CSS3技术日趋成熟，现如今被越来越多的网站广泛的运用。模板之家代码频道为大家收集整理最新的CSS3按钮代码，CSS3菜单代码，CSS3特效代码等供大家学习交流，好的代码是学习进步的基石同时也可以在项目中得以运用。

Q3: 如何制作一个漂亮的 css 按钮

启动dreamweaver，点击“站点”---“新建站点”

2

在弹出的窗口中，站点名称为“漂亮按钮”，本地站点文件夹可以根据需要选择。点击“保存”按钮，站点创建成功。

END

二、创建css文件

1

点击“文件”----“新建”，在弹出的窗体中选择“空白页”-----“CSS”，然后点击“创建”按钮。

2

点击“文件”----“保存”，在文件名中输入“style”，然后点击“保存”，样式表文件创建成功。

END

三、创建html页面

1

点击“文件”----“新建”，在弹出的窗体中选择“空白页”-----“HTML”---“无”。

2

在附加CSS文件中，选择style.css样式表文件，点击“确定”。

3

点击“创建”按钮，生成HTML文件。点击“文件”----“保存”按钮，文件名设置为“index”，最后点击保存即可。

END

三、在html页面中添加一个按钮控件

1

在“插入”-----“表单”中，点击“按钮”

2

在弹出的对话框中，什么也不需要修改，直接点击“确定”。

3

在弹出窗口中，选择“是“

4

按钮添加成功，效果如下。

END

四、新建CSS规则

1

在CSS样式表中，选择“新建CSS规则“

2

在弹出的窗口中选择”类（可应用于任何HTML元素）“，选择器名称设置为“btnstyle”，然后点击“确定”。

3

然后，在找到按钮控件，将它的类设置为”btnstyle”

END

五、用CSS规则修改按钮控件的外观

1

.btnstyle {

width: 86px;/*按钮控件的宽度*/

text-align: center;/*按钮控件中文本居中显示*/

line-height: 100%;/*用百分比设置行高*/

padding-top: 0.5em;/*文本顶部的内边距*/

padding-right: 2em;/*文本右侧的内边距*/

padding-bottom: 0.55em;/*文本底部的内边距*/

padding-left: 2em;/*文本左侧的内边距*/

font-family: "Arial Black", Gadget, sans-serif;/*字体*/

font-size: 14px;/*字体大小*/

font-style: normal;/*字体样式*/

font-variant: normal;/*小写字母*/

font-weight: normal;/*文本不需要加粗*/

text-decoration: none;/*文本不需要下划线等*/

margin-top: 0px;/*外边框的距离*/

margin-right: 2px;/*外边框的距离*/

margin-bottom: 0px;/*外边框的距离*/

margin-left: 2px;/*外边框的距离*/

vertical-align: text-bottom;/*图像放在文本下面*/

display: inline-block;/*段落内生出内框*/

cursor: pointer;/*鼠标的形状*/

zoom:1;

outline-width:medium;/*整个轮廓的宽度*/

outline-color:inherit;/*轮廓的颜色*/

font-size-adjust:none;

font-stretch:normal;

border-top-left-radius:0.5em;/*圆角边框弧度*/

border-top-right-radius:0.5em;/*圆角边框弧度*/

border-bottom-left-radius:0.5em;/*圆角边框弧度*/

border-bottom-right-radius:0.5em;/*圆角边框弧度*/

box-shadow:0px 1px 2px rgba(0,0,0,0.2);/*给按钮增加阴影*/

color:#fefee9;/*设置文本的颜色*/

border-top-color:#da7c0c;/*边框的颜色*/

border-right-color:#da7c0c;/*边框的颜色*/

border-bottom-color:#da7c0c;/*边框的颜色*/

border-left-color:#da7c0c;/*边框的颜色*/

border-top-width:1px;/*边框的粗细*/

border-right-width:1px;/*边框的粗细*/

border-bottom-width:1px;/*边框的粗细*/

border-left-width:1px;/*边框的粗细*/

border-top-style:solid;/*边框的样式*/

border-right-style:solid;/*边框的样式*/

border-bottom-style:solid;/*边框的样式*/

border-left-style:solid;/*边框的样式*/

background-image:none;/*背景图片*/

background-attachment:scroll;/*背景图片是否移动*/

background-repeat:repeat;/*允许重复*/

background-position-x:0%;/*背景的x轴坐标*/

background-position-y:0%;/*背景的y轴坐标*/

background-size:auto;/*背景图片的尺寸*/

background-origin:padding-box;/*背景图像相对于内边距框来定位*/

background-clip:padding-box;/*背景被裁剪到内边距框*/

background-color:#f78d1d;/*背景颜色*/

}更多学习5 1 r g b

2

再写一句mybtn的hover样式。代码如下：

.btnstyle:hover {

background-color: #f47c20;

}

Q4: CSS可否改变设置按钮的样式？怎么做呢？菜鸟求教~

1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。

2、按钮样式比较多，这样写让代码不整洁，可阅读性差，就要用style标签。

3、style type="text/css"/style样式表。style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。

4、把 样式表中的  button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。

5、通过javascript动态修改样式，为了避免用户多次点击提交按钮重复提交信息，在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。

6、修改样式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以写多个样式样式属性。

7、修改样式的其他方法：obj.setAttribute("class", "style2");直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。

8、修改样式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。