按钮样式(按钮样式网站)
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");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。
常见的按钮有哪些？
按钮的不同分类如下：* 动作按钮* 常用按钮样式* 按钮的颜色和形状* 按钮状态和反馈* 标签按钮* 触摸屏按钮* 按钮的位置* 系统按钮* 总结 动作按钮 我们将分析按钮的层次结构和它们通信的语言。虽然有些按钮通熟易懂，但按钮操作不取决于它们的外观，而是取决于用户的行为。 1_1.行为召唤（CTA / C2A）在设计中行为召唤按钮通常会提示用户注册/立即购买等。在产品设计中如果强烈建议用户应该做的事情应该使用CTA按钮。 行为召唤按钮对于CTA按钮，我喜欢使用圆形按钮，这样会更引人注目。 1_2.主要操作按钮虽然CTA按钮和主按钮看起来相同，但我喜欢将它们分开。主按钮应该是一个强大的视觉指示器，可以帮助用户完成他们的旅程。主按钮应该在用户可能想要“下一步”、“完成”、“开始”等的情况下使用。主要操作按钮对于主要操作，我喜欢使用实心按钮。 1_3.次要操作按钮从“返回”的辅助按钮到“下一步”的主按钮，或从“编辑”的辅助按钮到“保存”的主按钮。辅助按钮是我们为用户提供的主要操作的备选方案。 主按钮旁边的辅助按钮的两种设计我更倾向于使用线性按钮或文本链接作为辅助按钮。 1_4.三级按钮三级按钮通常用于其他操作，可能暂时不是用户想要做的事情。比如“添加朋友”、“扫一扫”、“编辑”或“删除”之类的内容，前提是它们不是主要操作。不同形式的三级按钮一般来说，人们会使用较小或较不突出的按钮样式。 常用按钮样式 下面我们将介绍常见的按钮样式，不同风格的按钮样式和他们的使用技巧。 2_1.实心按钮实心按钮是带有实心填充的按钮。 一个实心按钮 2_2.线性和幽灵按钮线性按钮和实心按钮正好相反，一个没有填充的按钮 – 只是一个轮廓。虽然经常互换使用，但我更喜欢将线性按钮视为浅色（在白底下按钮的轮廓和文本颜色深一点更明显），将幽灵按钮视为深色（在黑底下按钮的轮廓和文本颜色浅一点更明显）。 线性按钮（左）和幽灵按钮（右） 2_3.圆形按钮圆形按钮其边缘设置为最大圆角半径。 圆形按钮 2_4.FAB（悬浮按钮）悬浮按钮是一种巧妙的设计模式，Google Material Design中更加受欢迎。虽然它们可能看起来像一个图标按钮，但实际上它们用在屏幕上的主要操作按钮。
怎么给按钮添加CSS样式?
给按钮添加css样式的方法：
添加方法：
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线
2、PADDING-RIGHT: 2px; 内边距 右
3、BORDER-TOP: #7b9ebd 1px solid; 上边线
4、PADDING-LEFT: 2px; 内边距 左
5、FONT-SIZE: 12px; 文字大小
6、BORDER-LEFT: #7b9ebd 1px solid; 左边线
7、CURSOR: hand; 鼠标移上去时，变成手形。
8、COLOR: black; 颜色黑 （表示文字颜色）
9、PADDING-TOP: 2px; 内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
扩展资料
CSS样式部分
大小 {font-size: 12px}，x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体： (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性： (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
字间距 {letter-spacing: normal;} 数值 /*这个属性有用，多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)