当前位置:秋硕笔记 > 教程 > 正文

CSS3 按钮

一、基本按钮样式

1、CSS 按钮演示


链接按钮

2、CSS 代码





自学教程(如约智惠.com)


CSS 按钮


链接按钮




二、按钮颜色

1、CSS 按钮演示





2、CSS 代码

[cc]



自学教程(如约智惠.com)


按钮颜色

我们可以使用 background-color 属性来设置按钮颜色:








[/cc]

三、按钮大小

1、CSS 按钮演示





2、CSS 代码





我们可以使用 font-size 属性来设置按钮大小:
[cc]



自学教程(如约智惠.com)


按钮大小

我们可以使用 font-size 属性来设置按钮大小:








[/cc]

四、圆角按钮

1、CSS 按钮演示





2、CSS 代码

我们可以使用 border-radius 属性来设置圆角按钮
[cc]



自学教程(如约智惠.com)


圆角按钮

我们可以使用 border-radius 属性来设置圆角按钮:








[/cc]

五、按钮边框颜色

1、按钮演示





2、css代码

我们可以使用 border 属性设置按钮边框颜色。
[cc]



自学教程(如约智惠.com)


按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:








[/cc]

六、鼠标悬停按钮

1、按钮演示


2、CSS代码

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 “hover” 效果的速度:
[cc]



自学教程(如约智惠.com)


按钮边框颜色

我们可以使用 border 属性设置按钮边框颜色:








[/cc]

七、按钮阴影

1、按钮演示


2、CSS代码

我们可以使用 box-shadow 属性来为按钮添加阴影:
[cc]



自学教程(如约智惠.com)


按钮阴影

我们可以使用 box-shadow 属性来为按钮添加阴影:





[/cc]

八、禁用按钮

正常按钮 禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。

提示: 我们可以添加 cursor 属性并设置为 “not-allowed” 来设置一个禁用的图片:
[cc]



自学教程(如约智惠.com)


禁用按钮

我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 “disabled” 属性效果)。





[/cc]

九、按钮宽度

250px
50% 100%

   默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

   提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。
[cc]



自学教程(如约智惠.com)


按钮宽度

默认情况下,按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:

提示: 如果要设置固定宽度可以使用像素 (px) 为单位,如果要设置响应式的按钮可以设置为百分比。






[/cc]

十、按钮组

ButtonButtonButtonButton
移除外边距并添加 float:left 来设置按钮组:
[cc]


自学教程(如约智惠.com)


按钮组

移除外边距并添加 float:left 来设置按钮组:




记住要清除浮动,否则下一个 p 元素的按钮也会显示在同一行。



[/cc]

十一、带边框按钮组

ButtonButtonButtonButton
我们可以使用 border 属性来设置带边框的按钮组:
[cc]



自学教程(如约智惠.com)


带边框按钮组

移除外边距并添加 float:left 来设置按钮组:




记住要清除浮动,否则下一个 p 元素的按钮也会显示在同一行。



[/cc]

十二、按钮动画

鼠标移动到按钮上后添加箭头标记:
[cc]



自学教程(如约智惠.com)


按钮动画




[/cc]
点击时添加”波纹”效果
[cc]



自学教程(如约智惠.com)


按钮动画 – 波纹效果




[/cc]
点击时添加”压下”效果
[cc]



自学教程(如约智惠.com)


按钮动画 – “按压效果”




[/cc]

十三、css3+html5——按钮篇

[cc]




各式各样的按钮


5div按钮


2链接按钮









[/cc]
演示:


5div按钮


2链接按钮







感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论抢沙发