ybutton

by mikeskinner

HTML

<tbody>
                    <tr>
        <td colspan="2">
            <p>These are the basic buttons that can be rendered using the <code>$ybtn.ybutton</code> helper method.</p>
            <table class="table table-striped u-space-b0">
                <thead class="responsive-hidden-medium">
                    <tr>
                        <th>
                        </th>
                        <th class="u-text-centered">Small</th>
                        <th class="u-text-centered">Medium (Default)</th>
                        <th class="u-text-centered">Big</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Secondary Button<br>(Default)</th>
                            <td data-td-label="Small" class="u-align-middle u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn ybtn--small"><span>Button</span></button>
    </td>
    <td data-td-label="Medium" class="u-align-middle u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn"><span>Button</span></button>
    </td>
    <td data-td-label="Big" class="u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn ybtn--big ybtn--disabled"><span>Button</span></button>
    </td>

                    </tr>
                    <tr>
                        <th>Primary Button</th>
                            <td data-td-label="Small" class="u-align-middle u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn ybtn--primary ybtn--small"><span>Button</span></button>
    </td>
    <td data-td-label="Medium" class="u-align-middle u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn ybtn--primary ybtn--disabled"><span>Button</span></button>
    </td>
    <td data-td-label="Big" class="u-dead-center-alt">
        <button type="submit" value="submit" class="ybtn ybtn--primary ybtn--big"><span>Button</span></button>
    </td>

           ...

CSS

body {
    font-size: 14px;
    line-height: 1.28571em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #333;
}
.ybtn {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    cursor: pointer;
    border: 1px solid;
    font-weight: 700;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    line-height: 1.28571em;
    border-color: #ccc;
    color: #666;
    background-color: #f7f7f7;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f7f7f7));
    background: linear-gradient(#fff, #f7f7f7);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    padding: 8px 19px 9px;
    border-radius: 3px
}

.ys-modern-type .ybtn {
    font-size: 15px;
    line-height: 20px
}

.ybtn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

@media only screen and (max-width:989px) {
    .responsive .yform .ybtn {
        padding: 9px 18px
    }
}

@media only screen and (max-width:479px) {
    .responsive .ybtn {
        padding: 12px 14px;
        box-shadow: none;
        font-weight: 400
    }
}

.ltie8 .ybtn {
    border: 0!important
}

.ybtn:hover {
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background: linear-gradient(#fff, #fff)
}

.ybtn:active {
    background-color: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ededed));
    background: linear-gradient(#f5f5f5, #ededed)
}

.ybtn.ybtn--disabled,
.ybtn.ybtn-disabled,
.ybtn[disabled] {
    background-color: #e3e3e3;
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#e3e3e3));
    background: linear-gradient(#ebebeb, #e3e3e3);
    box-shadow: none
}

a.ybtn {
    text-decoration: none!important
}

a.ybtn:hover,
a.ybtn:visited {
    color:...