MUSIC ON

Buttons

Buttons are a convenient tool when it comes to more traditional actions. To that end, Theme includes a lot of easy to use button styles that you can customize or override to fit your needs.

Styles, Sizes & Options

Theme buttons have a number of parameters and styles — you can see a few examples below.

  •  

    Button classes can also be applied to

    button

    elements, as well as

    input type="submit"

    elements.

    Regular A Href Button »

  • 
    
    <!-- Types -->
    
    <a class="button" href="#">Normal</a>
    
    <a class="radius button" href="#">Radius</a>
    
    <a class="button purple" href="#">Purple</a>
    
    <a class="radius button purple" href="#">Purple Radius</a>
    
    <a class="button white" href="#">White</a>
    
    <a class="radius button white" href="#">White Radius</a>
    
    

Dropdown Buttons

Theme includes buttons which have a dropdown when you click specifically on the down-arrow part of the button (a split button).

These are useful when an action has several possible outcomes to select from, or when there are secondary choices you can make in lieu of a primary action. Dropdown buttons use the same classes as any other button, but a different structure. If you need your dropdown to go up, simple add a class of

.up

to

.button.dropdown

 

  • 
    
    <div href="#" class="large button dropdown">
    
      Dropdown Button
    
      <ul>
    
        <li><a href="#">Dropdown Item</a></li>
    
        <li><a href="#">Another Dropdown Item</a></li>
    
        <li class="divider"></li>
    
        <li><a href="#">Last Item</a></li>
    
      </ul>
    
    </div>
    
    

Get your Forms in Formation

Forms can be a pain in the ass to build, but they don’t have to be. Using our grid, you can build really complex form layouts in no time at all!

Learn about our forms »

Our Partners