Lapus | 多用途HTML模板+网页构建器
通过电子邮箱注册
已经拥有账号？ 登录

Buttons

These modular elements can be readily used and customized across pages and in different blocks.

Explore all of Lapus's modular elements
at the Element Index Page →

Standard Buttons

The default button style for Lapus using the .btn class. Customize the size of the buttons using .btn--lg and .btn--sm. 

<a class="btn" href="#">
	<span class="btn__text">Button Text</span>
</a>
.btn--sm .btn .btn--lg

Coloured Buttons

Use the classes .btn--primary, .btn--primary-1 and .btn--primary-2 to colour the buttons using the theme's colour schemes. 

<a class="btn btn--primary" href="#">
	<span class="btn__text">Button Text</span>
</a>
.btn--primary .btn--primary-1 .btn--primary-2

Icon Buttons

Use the class .btn--icon on the button and place an <i> icon element inside the .btn__text element. 

<a class="btn btn--primary btn--icon" href="#">
	<span class="btn__text"><i class="icon-class"></i>Button Text</span>
</a>
New document Add To Bag

Social Buttons

Use the classes .bg--facebook, .bg--twitter etc. to colour buttons with their corresponding brand colours. 

<a class="btn bg--facebook btn--icon" href="#">
	<span class="btn__text"><i class="icon-class"></i>Button Text</span>
</a>