Tsong CSS Docs

Button

PRIMARY BUTTON


	<button type="button" class="t-btn-b">BTN-PRIMARY</button>
	<button type="button" class="t-btn-r">BTN-PRIMARY</button>
	<button type="button" class="t-btn-g">BTN-PRIMARY</button>
	<button type="button" class="t-btn-y">BTN-PRIMARY</button>
	<button type="button" class="t-btn-m">BTN-PRIMARY</button>
	<button type="button" class="t-btn-c">BTN-PRIMARY</button>
	<button type="button" class="t-btn-o">BTN-PRIMARY</button>
	<button type="button" class="t-btn-rp">BTN-PRIMARY</button>
	<button type="button" class="t-btn-ch">BTN-PRIMARY</button>
	<button type="button" class="t-btn-sg">BTN-PRIMARY</button>
	<button type="button" class="t-btn-a">BTN-PRIMARY</button>
	<button type="button" class="t-btn-d">BTN-PRIMARY</button>

ROUNDED BUTTON


	<button type="button" class="t-btn-b rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-r rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-g rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-y rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-m rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-c rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-o rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-rp rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-ch rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-sg rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-a rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-d rounded">BTN-PRIMARY</button>

SHARP BUTTON


	<button type="button" class="t-btn-b rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-r rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-g rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-y rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-m rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-c rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-o rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-rp rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-ch rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-sg rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-a rounded-0">BTN-PRIMARY</button>
	<button type="button" class="t-btn-d rounded-0">BTN-PRIMARY</button>

OUTLINE BUTTON


	<button type="button" class="t-btn-b-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-r-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-g-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-y-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-m-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-c-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-o-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-rp-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-ch-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-sg-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-a-outline rounded">BTN-PRIMARY</button>
	<button type="button" class="t-btn-d-outline rounded">BTN-PRIMARY</button>

Button With Icons


	<button class="t-btn-d"><i class="fa fa-home"></i> Home</button>
	<button class="t-btn-sg"><i class="fa fa-taxi" aria-hidden="true"></i> Taxi</button>

Round Button With Icons


	<button class="t-btn-d icon-rounded"><i class="fa fa-home"></i></button>
	<button class="t-btn-sg icon-rounded"><i class="fa fa-taxi" aria-hidden="true"></i></button>
	<button class="t-btn-icon-rounded-o"><i class="fa fa-home"></i></button>
	<button class="t-btn-a icon-rounded"><i class="fa fa-cogs" aria-hidden="true"></i></button>	
	<button class="t-btn-d icon-rounded"><i class="fas fa-blind" aria-hidden="true"></i></button>

Button With Icons and Notification Badges

21

12

21


    <button class="t-btn-a">Facebook</button>
        <span class="t-btn-notif-sq">
            21
        </span>
 
    <button class="t-btn-d icon-rounded"><i class="fa fa-envelope"></i></button>
        <span class="t-btn-notif-rounded">
            12
        </span>
    <button class="t-btn-r icon-rounded"><i class="fa fa-taxi" aria-hidden="true"></i></button>
        <span class="t-btn-notif-sq">
            21
        </span>