W3.CSS Buttons (按钮)

2020-11-30 14:40 更新

W3.CSS Button 类

W3.CSS为按钮提供以下类:

定义
w3-btn 具有阴影悬停效果的矩形按钮。
默认颜色是黑色。
w3-button
具有灰色悬停效果的矩形按钮。
在W3.CSS 3版中,默认颜色是浅灰色。在4版中,
默认颜色是从父元素继承的。
w3-bar 可用于将按钮分组在一起的水平条。
(完美的水平导航菜单)
w3-block
可用于定义全角(100%)按钮的类。
w3-circle
可用于定义圆形按钮。
w3-ripple
可以用来产生涟漪效应。

Buttons

w3-button 类和 w3-btn 类都向任何 HTML 元素添加按钮行为。

最常用的元素有<input type=“button”>、<button>和<a>:

实例

<input class="w3-button w3-black" type="button" value="Input Button">

<button class="w3-button w3-black">按钮按钮</button>

<a href="https://www.w3schools.com" rel="external nofollow" target="_blank"  class="w3-button w3-black">链接按钮</a>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮颜色

所有 w3-color  类别都用于向按钮添加颜色:

实例

<button class="w3-button w3-black">Black</button>

<button class="w3-button w3-khaki">Khaki</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

悬停颜色

w3-hover-color 类用于悬停颜色添加到按钮:

实例

<button class="w3-button w3-hover-black">Black</button>

<button class="w3-button w3-hover-red">Red</button>

<button class="w3-button w3-hover-purple">Purple</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮形状

w3-round-size 类用于圆角边框添加到按钮:

实例

<button class="w3-button w3-round">正常圆形按钮</button>

<button class="w3-button w3-round-large">大号圆形按钮</button>

<button class="w3-button w3-round-xlarge">加大号圆形按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮尺寸

w3-size 类可以用来定义不同的文本大小:

实例

<button class="w3-button w3-tiny">特小</button>

<button class="w3-button w3-small">小</button>

<button class="w3-button w3-medium">中</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮边框

w3-border 类可用于添加边框按钮。

w3-border-color 类用于定义边框的颜色:

实例

<button class="w3-button w3-white w3-border">按钮</button>

<button class="w3-button w3-white w3-border w3-border-blue">按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

提示:添加w3-round- size类以添加圆角边框。


具有不同文字效果的按钮

w3-wide 类增加了一个更广泛的文本效果:

实例

<button class="w3-button">正常按钮</button>

<button class="w3-button w3-wide">宽文本按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮可以具有斜体和粗体文本效果,使用标准HTML标记(<i>和<b>)为按钮文本添加斜体或粗体效果:

实例

<button class="w3-button"><i>文字显示斜体</i></button>

<button class="w3-button"><b>文字显示粗体</b></button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

带填充按钮

w3-padding-size 类是用来添加按钮周围的文本效果:

实例

<button class="w3-button w3-padding-small">按钮</button>

<button class="w3-button">按钮</button>

<button class="w3-button w3-padding-large">按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

全宽度按钮

要创建全宽度按钮,请将w3-block类添加到按钮。

全宽度按钮的宽度为100%,并覆盖父元素的整个宽度:

实例

<button class="w3-button w3-block">按钮</button>

<button class="w3-button w3-block w3-teal">按钮</button>

<button class="w3-button w3-block w3-red w3-left-align">按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

提示:将按钮文本与 w3-left-align 类或 w3-right-align 右对齐对齐

可以使用 style =“ width:”定义 a 块的大小。

实例

<button class="w3-button w3-block w3-black" style="width:30%">按钮</button>

<button class="w3-button w3-block w3-teal" style="width:50%">按钮</button>

<button class="w3-button w3-block w3-red" style="width:80%">按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

禁用的按钮

按钮具有阴影效果而突出,将鼠标悬停在其上时,光标变成手形。

禁用的按钮是不透明的(半透明),并显示“禁止停车标志”。

w3-disabled 类是用来创建一个禁用按钮(如果该元素支持标准的 HTML disabled 属性,你可以改用 disabled attribute 属性):

实例

<a class="w3-button w3-disabled" href="https://www.w3cschool.cn">链接按钮</a>

<button class="w3-button" disabled>按钮</button>

<input type="button" class="w3-button" value="Button" disabled>

<a class="w3-btn w3-disabled" href="https://www.w3cschool.cn">链接按钮</a>

<button class="w3-btn" disabled>按钮</button>

<input type="button" class="w3-btn" value="Button" disabled>


尝试一下 »
点击“尝试一下”按钮查看在线实例

按钮栏

可以使用 w3-bar 类在水平栏中将按钮分组在一起:

实例

<div class="w3-bar">

  <button class="w3-button w3-black">按钮</button>

  <button class="w3-button w3-teal">按钮</button>

  <button class="w3-button w3-red">按钮</button>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

提示:W3-bar 类是在 W3.CSS 版本 2.93 / 2.94 中引入的。

通过使用 w3-bar-item 类,可以将按钮组合在一起而在它们之间没有空格:

实例

<div class="w3-bar">

  <button class="w3-bar-item w3-button w3-black">按钮</button>

  <button class="w3-bar-item w3-button w3-teal">按钮</button>

  <button class="w3-bar-item w3-button w3-red">按钮</button>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

可以使用 w3-center 类将按钮栏居中:

实例

<div class="w3-center">

<div class="w3-bar">

  <button class="w3-button w3-black">按钮</button>

  <button class="w3-button w3-teal">按钮</button>

  <button class="w3-button w3-disabled">按钮</button>

</div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

要在同一行上显示两个(或更多)按钮栏,请添加 w3-show-inline-block 类:

实例

<div class="w3-show-inline-block">

<div class="w3-bar">

  <button class="w3-btn">按钮</button>

  <button class="w3-btn w3-teal">按钮</button>

  <button class="w3-btn w3-disabled">按钮</button>

</div>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

导航栏

按钮栏可以轻松用作导航栏:

实例

<div class="w3-bar w3-black">

  <button class="w3-bar-item w3-button">按钮</button>

  <button class="w3-bar-item w3-button">按钮</button>

  <button class="w3-bar-item w3-button">按钮</button>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

可以使用 style =“ width:”定义每个项目的大小:

实例

<div class="w3-bar">

  <button class="w3-bar-item w3-button" style="width:33.3%">按钮</button>

  <button class="w3-bar-item w3-button w3-teal" style="width:33.3%">按钮</button>

  <button class="w3-bar-item w3-button w3-red" style="width:33.3%">按钮</button>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

提示:您将在本教程的后面部分详细了解导航。


左右按钮

使用 w3-left 类和 w3-right 类将按钮向左或向右浮动:

实例

<div class="w3-bar">

  <button class="w3-button w3-left">左</button>

  <button class="w3-button w3-right">右</button>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

具有波纹效果的按钮

w3-ripple 类创建的按钮涟漪效应(当他们点击时):

实例

<button class="w3-button w3-ripple">按钮</button>

<button class="w3-button w3-ripple w3-red">按钮</button>

<button class="w3-button w3-ripple w3-yellow">按钮</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例

所有元素都可以是按钮

使用 W3.CSS,所有元素都可以是一个按钮:

实例

<div class="w3-button w3-white w3-ripple" style="margin:0;padding:0">

        <img src="img_snowtops.jpg" style="width:100%">

        <p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">图片可以是 w3 按钮</font></font></p>

    </div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

圆形按钮

w3-circle 类可用于创建圆形按钮:

实例

<button class="w3-button w3-circle w3-black">+</button>

<button class="w3-button w3-circle w3-teal">+</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-circle 类可用于创建方形按钮:

实例

<button class="w3-button w3-black">+</button>

<button class="w3-button w3-teal">+</button>


尝试一下 »
点击“尝试一下”按钮查看在线实例
以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号