按钮
所有按钮元素都可以使用左侧导航
的所有class类进行细节样式的调整
(1) 基于纯CSS的超链接<a>元素、<button>元素、<input>元素按钮
此类型按钮常用于表单及其网站其它内容部分,Dsure提供18种不同的基础色彩和4种大小尺寸供您选择
如果按钮要使用白色字体，则叠加样式.dsure-btn-t-white
HTML代码:
<a class="dsure-c-btn dsure-btn-t-white dsure-bg-blue" href="#">按钮文字</a>
<a class="dsure-c-btn dsure-btn-t-white dsure-bg-blue" href="#"><i class="dsure-icon dsure-icon-home2"></i> 带图标的按钮文字</a>
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">按钮文字</button>
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-camera2"></i> 带图标的按钮文字</button>
<input type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-c-btn-submit" value="按钮文字">
| 基础样式(默认大小) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-black
|
|
|
dsure-c-btn dsure-bg-silver
|
|
|
dsure-c-btn dsure-bg-gray
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-red
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-purple
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-green
|
|
|
dsure-c-btn dsure-bg-aquamarine
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-olivedrab
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-pink
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-indigo
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-orange
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-brown
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-yellow
|
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-cadetblue
|
|
|
dsure-c-btn dsure-bg-lemonchiffon
|
|
|
dsure-c-btn dsure-bg-lavender
|
|
|
dsure-c-btn dsure-bg-burlywood dsure-btn-t-white
|
(2) 基于纯CSS的超链接<a>元素、<button>元素、<input>元素扩展型按钮
| 扩展样式(自定义色彩) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-black
|
|
|
dsure-c-btn dsure-bg-silver
|
|
...
|
只要在基础样式的基础上叠加格式为.dsure-bg-???的样式即可，色彩参考左侧导航
|
| 扩展样式(默认极小型) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-c-btn-xsmall dsure-btn-t-white dsure-bg-blue
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-c-btn-xsmall即可
|
| 扩展样式(默认小型) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-c-btn-small dsure-btn-t-white dsure-bg-blue
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-c-btn-small即可
|
| 扩展样式(默认中型) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-c-btn-medium dsure-btn-t-white dsure-bg-blue
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-c-btn-medium即可
|
| 扩展样式(默认大型) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-c-btn-big dsure-btn-t-white dsure-bg-blue
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-c-btn-big即可
|
| 扩展样式(带图标) |
HTML代码 (您可以根据需要叠加通用样式) |
|
|
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-camera2"></i> 蓝色(带图标)</button>
|
|
...
|
在按钮文字的前面或者后面加上<i class="dsure-icon dsure-icon-camera2"></i> 类型的图标html代码
注意：带图标类型按钮不支持<input>元素按钮
|
| 扩展样式(无圆角) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue
|
|
...
|
方法1：找到格式为.dsure-radius-???的样式，去掉即可
方法2：叠加.dsure-radius-none样式
|
| 扩展样式(小型圆角) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-small
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-radius-small即可,9.0版本以下IE浏览器无效
|
| 扩展样式(中型圆角) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-medium
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-radius-medium即可,9.0版本以下IE浏览器无效
|
| 扩展样式(大型圆角) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-big
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-radius-big即可,9.0版本以下IE浏览器无效
|
| 扩展样式(waiting状态) |
样式代码 (您可以根据需要叠加通用样式) 拷贝到class=""的双引号中使用 |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-waiting
|
|
...
|
只要在基础样式的基础上叠加样式.dsure-waiting即可,9.0版本以下IE浏览器无效
|