Button

TorqueUI is a responsive web design centric UI Framework with components made for the modern web.
 
Download TorqueUI

Button

Different button types

<button type="submit">Go to checkout</button>
<button type="submit" class="button">Go to checkout</button>
<button type="submit" class="button-primary">Go to checkout</button>
<button type="submit" class="button-text">Go to checkout</button>
<button type="submit" class="button-primary"><i class="fa fa-check"></i></button>
<button type="submit" class="button-primary"><i class="fa fa-check"></i> Go to checkout</button>
<button type="submit" class="button-primary is-block">Go to checkout</button>
<button type="submit" class="button-primary is-block"><i class="fa fa-check"></i></button>
<button type="submit" class="button-primary is-block"><i class="fa fa-check"></i> Go to checkout</button>
<button class="button button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button-primary button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</button>

On a A-tag

<a href="#" class="button">Go to checkout</a>
<a href="#" class="button-primary">Go to checkout</a>
<a href="#" class="button-text">Go to checkout</a>
<a href="#" class="button-primary"><i class="fa fa-check"></i></a>
<a href="#" class="button-primary"><i class="fa fa-check"></i> Go to checkout</a>
<a href="#" class="button-primary is-block">Go to checkout</a>
<a href="#" class="button-primary is-block"><i class="fa fa-check"></i></a>
<a href="#" class="button-primary is-block"><i class="fa fa-check"></i> Go to checkout</a>
<a class="button-primary button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</a>
<fieldset class="form-group">
    <div style="width: 40%; float: left; margin-right: 10px;">
        <input type="text" class="form-input">
    </div>
    <div style="width: 50%; float: left;">
        <a href="#" class="button-primary">Go to checkout</a>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input">
    </div>
    <div style="width: 25%; float: left;">
        <a href="#" class="button-primary is-block">Go to checkout</a>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input">
    </div>
    <div style="width: 25%; float: left;">
        <a class="button-primary button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</a>
    </div>
</fieldset>

Disaled

<button disabled="disabled" type="submit">Go to checkout</button>
<button class="button button-icon" disabled="disabled"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button-primary button-icon" disabled="disabled"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<a class="is-disabled button-primary button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</a>
<a class="is-disabled button button-icon"><i class="fa fa-shopping-cart"></i>Go to checkout</a>

Button types with sizes

<button type="submit" class="large">Go to checkout</button>
<button type="submit" class="button large">Go to checkout</button>
<button type="submit" class="button-primary large">Go to checkout</button>
<a type="submit" class="button-primary large">Go to checkout</a>
<button type="submit" class="button-text large">Go to checkout</button>
<button class="button-primary button-icon large"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button button-icon large"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<fieldset class="form-group">
    <div style="width: 40%; float: left; margin-right: 10px;">
        <input type="text" class="form-input large">
    </div>
    <div style="width: 50%; float: left;">
        <button type="submit" class="button-primary large">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input large">
    </div>
    <div style="width: 25%; float: left;">
        <button type="submit" class="button-primary large is-block">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input large">
    </div>
    <div style="width: 25%; float: left;">
        <button class="button-primary button-icon large"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
    </div>
</fieldset>

Default

<button type="submit" class="default">Go to checkout</button>
<button type="submit" class="button default">Go to checkout</button>
<button type="submit" class="button-primary default">Go to checkout</button>
<a type="submit" class="button-primary default">Go to checkout</a>
<button type="submit" class="button-text default">Go to checkout</button>
<button class="button-primary button-icon default"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button button-icon default"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<fieldset class="form-group">
    <div style="width: 40%; float: left; margin-right: 10px;">
        <input type="text" class="form-input default">
    </div>
    <div style="width: 50%; float: left;">
        <button type="submit" class="button-primary default">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input default">
    </div>
    <div style="width: 25%; float: left;">
        <button type="submit" class="button-primary default is-block">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input default">
    </div>
    <div style="width: 25%; float: left;">
        <button class="button-primary button-icon default"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
    </div>
</fieldset>

Smal

<button type="submit" class="small">Go to checkout</button>
<button type="submit" class="button small">Go to checkout</button>
<button type="submit" class="button-primary small">Go to checkout</button>
<a type="submit" class="button-primary small">Go to checkout</a>
<button type="submit" class="button-text small">Go to checkout</button>
<button class="button-primary button-icon small"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button button-icon small"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<fieldset class="form-group">
    <div style="width: 40%; float: left; margin-right: 10px;">
        <input type="text" class="form-input small">
    </div>
    <div style="width: 50%; float: left;">
        <button type="submit" class="button-primary small">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input small">
    </div>
    <div style="width: 25%; float: left;">
        <button type="submit" class="button-primary small is-block">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input small">
    </div>
    <div style="width: 25%; float: left;">
        <button class="button-primary button-icon small"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
    </div>
</fieldset>

Xsmal

<button type="submit" class="xsmall">Go to checkout</button>
<button type="submit" class="button xsmall">Go to checkout</button>
<button type="submit" class="button-primary xsmall">Go to checkout</button>
<a type="submit" class="button-primary xsmall">Go to checkout</a>
<button type="submit" class="button-text xsmall">Go to checkout</button>
<button class="button-primary button-icon xsmall"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<button class="button button-icon xsmall"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
<fieldset class="form-group">
    <div style="width: 40%; float: left; margin-right: 10px;">
        <input type="text" class="form-input xsmall">
    </div>
    <div style="width: 50%; float: left;">
        <button type="submit" class="button-primary xsmall">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input xsmall">
    </div>
    <div style="width: 25%; float: left;">
        <button type="submit" class="button-primary xsmall is-block">Go to checkout</button>
    </div>
</fieldset>
<fieldset class="form-group">
    <div style="width: 70%; float: left; margin-right: 10px;">
        <input type="text" class="form-input xsmall">
    </div>
    <div style="width: 25%; float: left;">
        <button class="button-primary button-icon xsmall"><i class="fa fa-shopping-cart"></i>Go to checkout</button>
    </div>
</fieldset>
  • © TorqueUI