Upgrade

Explore

Pages

Wayne Shen

Button

Wayne Shen

10月 9, 2020

Button

Easily create nice looking .buttons, which come in different styles

Basic


Basic Size 




<button  class="button small">Xsmall</button> 
        <button  class="button">Default</button> 
        <button  class="button Large">Large</button> 
        <button  class="button xlarge">xlarge</button>

Button Colors

There are several style modifiers available. Just add one of the following
classes to
apply a
different look.

.success .secondary .danger
.success
.info
.dark .grey .dark .white
.light
















<button  class="button danger">danger</button>

Outline Button







 <button  class="button outline-success">success</button>

Soft color







 <button  class="button  soft-success">success</button>

add .disabledto make disable 







 <button  class="button soft-success disabled">Soft success</button>

Button transition 3d
hover







 <button  class="button success transition-3d-hover">Soft success</button>

Button Social








Button with
icon animation 


<button class="button success transition-3d-hover">
            <i class="icon-feather-shopping-cart mr-2"></i> Buy now
        </button>
        
        <button class="button outline-success transition-3d-hover">
            <i class="icon-feather-shopping-cart mr-2"></i> Buy now
        </button>
        
        <button  class="button danger icon-label bg-facebook">
            <span class="inner-icon"><i class="fas fa-play"></i></span>
            <span class="inner-text">Watch now </span>
        </button>