Buttons
Use any of the available classes of Base Stylesheets to quickly create a custom style.
(1) Base
Utilize the.dsure-btn-t-??? class to change text color.
HTML Code:
<a class="dsure-c-btn dsure-btn-t-white dsure-bg-blue" href="#">Button</a>
<a class="dsure-c-btn dsure-btn-t-white dsure-bg-blue" href="#"><i class="dsure-icon dsure-icon-home2"></i> Icon Button</a>
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">Button</button>
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-camera2"></i> Icon Button</button>
<input type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-c-btn-submit" value="Button">
| Color |
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) Extension
| Color |
Class |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-black
|
|
|
dsure-c-btn dsure-bg-silver
|
|
...
|
Utilize the.dsure-bg-??? class.
|
| Tiny in size |
Class |
|
|
dsure-c-btn dsure-c-btn-xsmall dsure-btn-t-white dsure-bg-blue
|
|
...
|
Utilize the.dsure-c-btn-xsmall class.
|
| Small in size |
Class |
|
|
dsure-c-btn dsure-c-btn-small dsure-btn-t-white dsure-bg-blue
|
|
...
|
Utilize the.dsure-c-btn-small class.
|
| Medium in size |
Class |
|
|
dsure-c-btn dsure-c-btn-medium dsure-btn-t-white dsure-bg-blue
|
|
...
|
Utilize the.dsure-c-btn-medium class.
|
| Large in size |
Class |
|
|
dsure-c-btn dsure-c-btn-big dsure-btn-t-white dsure-bg-blue
|
|
...
|
Utilize the.dsure-c-btn-big class.
|
| Icon button |
HTML code example |
|
|
<button class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-camera2"></i> Icon button</button>
|
|
...
|
Note：It is not supporting HTML tags like <input>
|
| No fillet |
Class |
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue
|
|
...
|
In the first method, remove class like .dsure-radius-???
In the second method, utilize the .dsure-radius-none class.
|
| Fillet (small) |
Class |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-small
|
|
...
|
Utilize the .dsure-radius-small class,Only supports up to IE 9.
|
| Fillet (medium) |
Class |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-medium
|
|
...
|
Utilize the.dsure-radius-medium class,Only supports up to IE 9.
|
| Fillet (large) |
Class |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-radius-big
|
|
...
|
Utilize the.dsure-radius-big class,Only supports up to IE 9.
|
| Waiting |
Class |
|
|
dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-waiting
|
|
...
|
Utilize the .dsure-waiting class,Only supports up to IE 9.
|