Buttons
Responsee offers stylish modern buttons, which contain: submit button style, cancel button style, reload button style, disabled button style and default button. The buttons are divided by color.
Default Buttons:
<div class="line"> <a class="button margin-bottom" href="#">Button</a> <a class="button submit-btn margin-bottom" href="#">Submit Button</a> <a class="button cancel-btn margin-bottom" href="#">Cancel Button</a> <a class="button reload-btn margin-bottom" href="#">Reload Button</a> <a class="button disabled-btn margin-bottom" href="#">Disabled Button</a> </div>
Buttons with Margins:
<div class="line"> <div class="margin"> <div class="s-12 m-6 l-five"> <a class="button s-12 margin-bottom" href="#">Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button submit-btn s-12 margin-bottom" href="#">Submit Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button cancel-btn s-12 margin-bottom" href="#">Cancel Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button reload-btn s-12 margin-bottom" href="#">Reload Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button disabled-btn s-12 margin-bottom" href="#">Disabled Button</a> </div> </div> </div>
Rounded Corner Buttons:
<div class="line"> <div class="margin"> <div class="s-12 m-6 l-five"> <a class="button rounded-btn s-12 margin-bottom" href="#">Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a> </div> </div> </div>
Full Rounded Corner Buttons:
<div class="line"> <div class="margin"> <div class="s-12 m-6 l-five"> <a class="button rounded-btn s-12 margin-bottom" href="#">Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-full-btn submit-btn s-12 margin-bottom" href="#">Submit Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-full-btn cancel-btn s-12 margin-bottom" href="#">Cancel Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-full-btn reload-btn s-12 margin-bottom" href="#">Reload Button</a> </div> <div class="s-12 m-6 l-five"> <a class="button rounded-full-btn disabled-btn s-12 margin-bottom" href="#">Disabled Button</a> </div> </div> </div>
Buttons with Icons:
<div class="line"> <a class="button rounded-full-btn margin-bottom" href="#"><i class="icon-star_empty"></i> Button</a> <a class="button rounded-full-btn submit-btn margin-bottom" href="#"><i class="icon-check"></i> Submit Button</a> <a class="button rounded-full-btn cancel-btn margin-bottom" href="#"><i class="icon-cross_mark"></i> Cancel Button</a> <a class="button rounded-full-btn reload-btn margin-bottom" href="#"><i class="icon-reload"></i> Reload Button</a> <a class="button rounded-full-btn disabled-btn margin-bottom" href="#"><i class="icon-chevron_left"></i> Disabled Button</a> </div>