Top

按钮

所有按钮元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 基于纯CSS的超链接<a>元素、<button>元素、<input>元素按钮

此类型按钮常用于表单及其网站其它内容部分,Dsure提供18种不同的基础色彩和4种大小尺寸供您选择
如果按钮要使用白色字体,则叠加样式.dsure-btn-t-white

使用<a>标签创建的按钮
 使用<a>标签创建的带图标的按钮


 
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>&nbsp;带图标的按钮文字</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>&nbsp;带图标的按钮文字</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>&nbsp;蓝色(带图标)</button>
... 在按钮文字的前面或者后面加上<i class="dsure-icon dsure-icon-camera2"></i>&nbsp;类型的图标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浏览器无效