文章
  • 文章
搜索
腾讯广告 >> 最新资讯 >>网站建设 >> 按钮阴影-网站建设
详细内容

按钮阴影-网站建设

按钮阴影-网站建设

 

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

实例

.button1 {    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);} .button2:hover {    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}


尝试一下 »


禁用按钮

 

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

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

实例

.disabled {    opacity: 0.6;    cursor: not-allowed;}


尝试一下 »


按钮宽度


 

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

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

实例

.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 100%;}



返回顶部 seo seo