Button

Buttons allow users to move to other pages or perform a specific task.
Various emphasis levels can be expressed using the button UI guidelines of Click to Buy.

Large Button

Use large buttons for buttons that are fixed at the bottom of the screen or used to make a final decision.

Filled default buttons are used for the most important action on the page or view. You can see which button is enabled by checking the state of the button.

ANormal

BWith Icon

C2 Lines


<div class="btn-type_wrap">
	<button class="btn-type _default">btn default</button>
	<button class="btn-type _cancel">btn cancel</button>
	<button class="btn-type _default" disabled>btn disabled</button>
</div>

<div class="btn-type_wrap">
	<button class="btn-type _default">btn default <i class="ic_download-wh"></i></button>
	<button class="btn-type _cancel">btn cancel <i class="ic_download-wh"></i></button>
	<button class="btn-type _default" disabled>btn disabled <i class="ic_download-wh"></i></button>
</div>

<div class="btn-type_wrap">
	<button class="btn-type _default _row2">richiesta di cancellazione di<br> una prenotazione</button>
	<button class="btn-type _cancel _row2">richiesta di cancellazione di<br> una prenotazione</button>
	<button class="btn-type _default _row2" disabled>richiesta di cancellazione di<br> una prenotazione</button>
</div>

Small button

The transparent auxiliary buttons with thin frames are used for subtasks.


<button class="btn-type _gray">Quotation detail</button>
<button class="btn-type _gray"><i class="ic_download"></i>Download Contract</button>

Buttons with text label

Text buttons are used to check simple information or call a simple function.

You can place an icon beside the text label to clarify the button’s task and draw attention.

AFunction with a Popup

Use the button below for functional pop-ups that require user action.

BSimple Function

For simple functions such as checking and refreshing simple information, use the appropriate button.

CButtons used to move inside/outside the page

This button is used to move the inside and outside of the page.


<button class="btn-type _btext"><i class="ic_loca_find"></i>Use Your Loaction Infomation</button>
<button class="btn-type _btext"><i class="ic_compare"></i>Compare Trims</button>
<button class="btn-type _btext"><i class="ic_check_blue"></i>Check What you Choose</button>
<button class="btn-type _btext"><i class="ic_filter_blue"></i>Filter</button>
<button class="btn-type _btext"><i class="ic_refresh"></i>Dealer Change</button>

<button class="btn-type _bktext"><i class="ic_refresh"></i>Clear All</button>
<button class="btn-type _bktext"><i class="ic_refresh"></i>Reload</button>
<button class="btn-type _bktext"><i class="ic_refresh"></i>Reset</button>
<button class="btn-type _bktext"><i class="ic_refresh"></i>Reset Filter</button>
<button class="btn-type _bktext"><i class="ic_play"></i>Video</button>
<button class="btn-type _bktext"><i class="ic_review01"></i>Review</button>
<button class="btn-type _bktext"><i class="ic_review"></i>Detail</button>
<button class="btn-type _bktext"><i class="ic_share"></i>Share</button>

<button class="btn-type _btext">Get Directions  &nbsp;<i class="ic_check_blue"></i></button>
<button class="btn-type _btext">Visit Dealer Page  &nbsp;<i class="ic_check_blue"></i></button>
<button class="btn-type _btext">View Detail  &nbsp;<i class="ic_check_blue"></i></button>
<button class="btn-type _glink">Membership withdrawal</button>