css按钮样式,css按钮样式大全

怎样用CSS写按钮样式

一般有三种方法：

Button标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。

a标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。

a标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。

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;

}

怎样给button设置默认的css样式

给按钮添加css样式有以下三种方法：

1，直接在元素上定义style，如下：

1

input type="button" style="这里定义样式"

2，页面中内嵌样式，如下：

1

2

3

4

style

.btn{需要添加的样式}

/style

input type="button" class="btn"

3，外部引用css文件，如下：

1

link rel="stylesheet" type="text/a href=";tn=44039180_cprfenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4nyDsn1m1P1TzPHckPhwW0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPjnYnW0Ln1R" target="_blank" class="baidu-highlight"css/a" href="这里是css文件的路径"

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");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。

纯css怎么做质感的按钮

CSS3按钮HTML代码：

div id="container_buttons"

p

a href="#" class="a_demo_one"

Click me!

/a

/p

p

a href="#" class="a_demo_one"

Come on, don't be afraid

/a

/p

p

a href="#" class="a_demo_one"

You can make this as wide as you want ;)

/a

/p

/div

CSS3按钮CSS样式代码：

.a_demo_one {

background-color:#3bb3e0;

padding:10px;

position:relative;

font-family: 'Open Sans', sans-serif;

font-size:12px;

text-decoration:none;

color:#fff;

border: solid 1px #186f8f;

background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(44,160,202)),

color-stop(1, rgb(62,184,229))

);

-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;

-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;

box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

.a_demo_one::before {

background-color:#ccd0d5;

content:"";

display:block;

position:absolute;

width:100%;

height:100%;

padding:8px;

left:-8px;

top:-8px;

z-index:-1;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;

-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;

-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;

box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;

}

.a_demo_one:active {

padding-bottom:9px;

padding-left:10px;

padding-right:10px;

padding-top:11px;

top:1px;

background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0, rgb(62,184,229)),

color-stop(1, rgb(44,160,202))

);

}