CSS 按钮

CSS 按钮

本章节我们为大家介绍使用 CSS 来制作按钮。


我们先看一下默认按钮和用css制作的按钮

    php中文网(php.cn)  

CSS 按钮

链接按钮

运行程序看一下


按钮颜色

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

实例

    php中文网(php.cn)  

按钮颜色

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

运行程序看一下


按钮大小

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

实例

    php中文网(php.cn)  

按钮大小

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

运行程序看一下


圆角按钮

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

    php中文网(php.cn)  

圆角按钮

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

运行程序看一下


按钮边框颜色

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

    php中文网(php.cn)  

按钮边框颜色

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

运行程序看一下


鼠标悬停按钮

我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。

提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:

    php中文网(php.cn)  

鼠标悬停按钮

运行程序看一下


按钮阴影

阴影按钮 鼠标悬停后显示阴影

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

    php中文网(php.cn)  

按钮阴影

运行程序看一下


禁用按钮

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

提示: 我么可以添加 cursor 属性并设置为 "not-allowed" 来设置一个禁用的图片:

    php中文网(php.cn)  

禁用按钮

运行程序看一下


按钮宽度

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

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

    php中文网(php.cn)  

按钮宽度



运行程序看一下


按钮组

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

    php中文网(php.cn)  

按钮组

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


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

运行程序看一下


带边框按钮组

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

    php中文网(php.cn)  

带边框按钮组

Add borders to create a bordered button group:


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

运行程序看一下


按钮动画

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

    php中文网(php.cn)  

按钮动画

运行程序看一下


点击时添加 "波纹" 效果:

    php中文网(php.cn)  

按钮动画 - 波纹效果

运行程序看一下


点击时添加 "压下" 效果:

    php中文网(php.cn)  

按钮动画 - "按压效果"

运行程序看一下



继续学习
||
php中文网(php.cn)

按钮动画 - "按压效果"

提交 重置代码
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!