Button Helpers

Basic Button

            <button class="elr-button">Button</button>
            
          
            <button class="elr-button elr-button-small">Button</button>
            
          
            <button class="elr-button elr-button-primary">Button</button>
            
          
            <button class="elr-button elr-button-secondary">Button</button>
            
          

Pill Button

            <button class="elr-button elr-button-pill">Button</button>
            
          
            <button class="elr-button elr-button-pill elr-button-small">Button</button>
            
          
            <button class="elr-button elr-button-pill elr-button-primary">Primary</button>
            
          
            <button class="elr-button elr-button-pill elr-button-secondary">Secondary</button>
            
          

Ghost Button

            <button class="elr-button elr-button-ghost">Button</button>
            
          
            <button class="elr-button elr-button-pill elr-button-ghost elr-button-primary">Primary</button>
            
          
            <button class="elr-button elr-button-ghost elr-button-secondary">Secondary</button>
            
          

Icon Buttons

icon can be on left or right

            <button class="elr-button elr-button-icon">
        <div class="elr-icon"><i class="fas fa-arrow-alt-circle-down"></i></div>
        <span class="elr-button-text">Download</span>
</button>
            
          
            <button class="elr-button elr-button-icon elr-button-primary">
        <div class="elr-icon"><i class="fas fa-arrow-alt-circle-down"></i></div>
        <span class="elr-button-text">Download</span>
</button>
            
          
            <button class="elr-button elr-button-icon elr-button-secondary">
        <div class="elr-icon"><i class="fas fa-arrow-alt-circle-down"></i></div>
        <span class="elr-button-text">Download</span>
</button>
            
          
            <button class="elr-button elr-button-icon">
        <span class="elr-button-text">Download</span>
        <div class="elr-icon"><i class="fas fa-arrow-alt-circle-down"></i></div>
</button>
            
          

or button can have an icon only

            <button class="elr-button elr-button-icon">
        <div class="elr-icon">
                <i class="fas fa-arrow-alt-circle-down"></i>
        </div>
</button>
            
          
            <button class="elr-button elr-button-icon-round">
        <div class="elr-icon">
                <i class="fas fa-cat"></i>
        </div>
</button>
            
          

Button Group

            <div class="elr-button-group">
        <button class="elr-button elr-button-primary elr-button-group-item">Button 1</button>
        <button class="elr-button elr-button-primary elr-button-group-item">Button 2</button>
        <button class="elr-button elr-button-primary elr-button-group-item">Button 3</button>
        <button class="elr-button elr-button-primary elr-button-group-item">Button 4</button>
</div>