Foundation 按钮

实例

<
a
href=
"#"
class=
"button info"
role=
"button"
>Link Button
<
/a
>


<
button
type=
"button"
class=
"button info"
>Button
<
/button
>


<
input
type=
"button"
class=
"button info"
value=
"Input Button"
>


<
input
type=
"submit"
class=
"button info"
value=
"Submit Button"
>

尝试一下 »

按钮大小

我们可以使用 .large, .small 或 .tiny 类来设置按钮大小：

实例

<
button
type=
"button"
class=
"button large"
>Large
<
/button
>


<
button
type=
"button"
class=
"button"
>Default
<
/button
>


<
button
type=
"button"
class=
"button small"
>Small
<
/button
>


<
button
type=
"button"
class=
"button tiny"
>Tiny
<
/button
>

尝试一下 »

圆角按钮

可以使用 .radius 和 .round 类来设置圆角按钮：

实例

<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>


<
button
type=
"button"
class=
"button radius"
>Radius Button
<
/button
>


<
button
type=
"button"
class=
"button round"
>Round Button
<
/button
>

尝试一下 »

延展按钮

可以使用 .expand 类来设置按钮的宽度为 100%:

实例

<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>


<
button
type=
"button"
class=
"button expand"
>Expanded Button
<
/button
>

尝试一下 »

禁用按钮

可以使用 .disabled 类来设置按钮不可点击:

实例

<
button
type=
"button"
class=
"button"
>Default Button
<
/button
>


<
button
type=
"button"
class=
"button disabled"
>Disabled Button
<
/button
>

尝试一下 »