Top

Buttons

¡Á
Catalog Base Extension

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.

Button
 Icon Button


 
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>&nbsp;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>&nbsp;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>&nbsp;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.