<button class="button is-info"
        data-kleber-click="is-large">
            <span class="icon is-big"><i class="fa fa-bolt"></i></span>
            Click to change the size!
    </button>
                    
                

                    
    <button class="button is-primary"
        data-kleber-target="#bell-button-icon"
        data-kleber-click="fa-bell,fa-heart">
            <span class="icon is-big"><i id="bell-button-icon" class="fa fa-bell"></i></span>
            Click to change the icon!
    </button>
                    
                

                    
<button class="button is-danger"
    data-kleber-scroll="is-large"
    data-kleber-scroll-target="#scroll"
        <span class="icon is-big"><i class="fa fa-desktop"></i></span>
        Will grow when you scroll past "Scrolls" title
</button>
                    
                

                    
<button class="button is-warning"
    data-kleber-scroll="is-large"
    data-kleber-scroll-target="#scroll"
    data-kleber-scroll-offset="-250"
        <span class="icon is-big"><i class="fa fa-heart"></i></span>
        Same as above, with offset
</button>
                    
                

                    
<button class="button is-light"
    data-kleber-scroll="is-large"
    data-kleber-scroll-target="#scroll"
    data-kleber-scroll-offset="300"
    data-kleber-stay="true"
        <span class="icon is-big"><i class="fa fa-heart"></i></span>
        Same as above, but stays
</button>
                    
                

                    
<button class="button is-success kinda-hidden"
    data-kleber-enters-viewport="unhide"
        <span class="icon is-big"><i class="fa fa-eye"></i></span>
        Appears after it enters the viewport
</button>
                    
                

                    
<button class="button is-info kinda-hidden"
    data-kleber-enters-viewport="unhide"
    data-kleber-stay="true"
        <span class="icon is-big"><i class="fa fa-eye"></i></span>
        Same as above, but stays.
</button>