Ascension 1.0 - Template Documentation

Buttons

Buttons are simple components that perform a certain action when clicked. They can be used for navigation between pages or executing JavaScript in the same page.

Please note that the elements presented in this page are using the default color scheme and font pair.

Usage

To create a button, simply add the class of button to an anchor, button or input type submit/button tag. All the options below are valid.

Code Preview 
						                            
						                                <a href="" class="button">Anchor tag</a>
						                                <button class="button">Button</button>
						                                <input type="submit" class="button" value="Submit input" />
						                                <input type="button" class="button" value="Button input" />
Anchor tag

Note: Because of their nature, buttons that are not generated from an anchor tag treat fonts differently so there is a slight height variations between them.

Button types & sizes

There are 4 button types:

Type Code & preview
Default 
						                                    
						                                        <a href="" class="button">Default</a>
Default
Ghost 
						                                    
						                                        <a href="" class="button ghost">Ghost</a>
Ghost
Pill 
						                                    
						                                        <a href="" class="button pill">Pill</a>
Pill
Secondary 
						                                    
						                                        <a href="" class="button secondary">Secondary</a>
Secondary

There are 2 button sizes:

Size Code & preview
Default 
						                                    
						                                        <a href="" class="button">Default</a>
Default
Large 
						                                    
						                                        <a href="" class="button large">Large</a>
Large

Helper classes

Here's a list of the available helper classes that can be applied to buttons.

Class Description Code & preview
full-width Makes a button occupy the entire available horizontal space. 
						                            
						                                <a href="" class="button full-width">Full width</a>
Full width
scroll-down-button Adds a large margin-top and removes margin-bottom. This is meant to be used on the small circle buttons like the ones in the hero of demo-4. 
						                            
						                                <p data-internal-nav class="hide-sm show-lg scroll-down-button"><a class="icon small" href=""><i class="image icon-arrow-down"></i></a></p>

button-group This class cannot be applied to a button. Instead, apply it to a parent element when you want to display 2 or more buttons on the same line. 
						                            
						                                <div class="button-group">
						                                    <a href="#" class="button pill">Button text</a>
						                                    <a href="#" class="button pill">Button text</a>
						                                </div> <!-- end .button-group -->
Button text Button text