twbuttons

twbuttons

A CSS button library built with {less} for Twitter Bootstrap 3


Flat


<button class="btn btn-flat btn-default">press me</button>
<button class="btn btn-flat btn-primary">press me</button>
<button class="btn btn-flat btn-info">press me</button>
<button class="btn btn-flat btn-success">press me</button>
<button class="btn btn-flat btn-warning">press me</button>
<button class="btn btn-flat btn-danger">press me</button>
	

Rectangle


<button class="btn btn-rect btn-default">press me</button>
<button class="btn btn-rect btn-primary">press me</button>
<button class="btn btn-rect btn-info">press me</button>
<button class="btn btn-rect btn-success">press me</button>
<button class="btn btn-rect btn-warning">press me</button>
<button class="btn btn-rect btn-danger">press me</button>
	

Gradient


<button class="btn btn-grad btn-default">press me</button>
<button class="btn btn-grad btn-primary">press me</button>
<button class="btn btn-grad btn-info">press me</button>
<button class="btn btn-grad btn-success">press me</button>
<button class="btn btn-grad btn-warning">press me</button>
<button class="btn btn-grad btn-danger">press me</button>
	

Circle


<button class="btn btn-circle btn-default">press me</button>
<button class="btn btn-circle btn-primary">press me</button>
<button class="btn btn-circle btn-info">press me</button>
<button class="btn btn-circle btn-success btn-xs">press me</button>
<button class="btn btn-circle btn-warning btn-sm">press me</button>
<button class="btn btn-circle btn-danger btn-lg">press me</button>
	

3D


<button class="btn btn-3d btn-default">press me</button>
<button class="btn btn-3d btn-primary">press me</button>
<button class="btn btn-3d btn-info">press me</button>
<button class="btn btn-3d btn-success btn-xs">press me</button>
<button class="btn btn-3d btn-warning btn-sm">press me</button>
<button class="btn btn-3d btn-danger btn-lg">press me</button>
	

Pill


<button class="btn btn-pill btn-default">press me</button>
<button class="btn btn-pill btn-primary">press me</button>
<button class="btn btn-pill btn-info">press me</button>
<button class="btn btn-pill btn-success btn-xs">press me</button>
<button class="btn btn-pill btn-warning btn-sm">press me</button>
<button class="btn btn-pill btn-danger btn-lg">press me</button>
	

Line


<button class="btn btn-line btn-default">press me</button>
<button class="btn btn-line btn-primary">press me</button>
<button class="btn btn-line btn-info">press me</button>
<button class="btn btn-line btn-success">press me</button>
<button class="btn btn-line btn-warning">press me</button>
<button class="btn btn-line btn-danger">press me</button>
	

Wrap

Wrap Circle Button


<span class="btn-wrap"><button class="btn btn-circle btn-gad btn-default">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-gad btn-primary">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-gad btn-info">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-gad btn-success btn-xs">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grd btn-warning btn-sm">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grd btn-danger btn-lg">press me</button></span>
	

Wrap Circle&Gradient Button


<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-default">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-primary">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-info">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-success btn-xs">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-warning btn-sm">press me</button></span>
<span class="btn-wrap"><button class="btn btn-circle btn-grad btn-danger btn-lg">press me</button></span>
	

Wrap Pill&Gradient Button


<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-default">press me</button></span>
<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-primary">press me</button></span>
<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-info">press me</button></span>
<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-success btn-xs">press me</button></span>
<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-warning btn-sm">press me</button></span>
<span class="btn-wrap"><button class="btn btn-pill btn-grad btn-danger btn-lg">press me</button></span
	

Mixins

Gradient&Rectangle Button


<button class="btn btn-rect btn-grad btn-default">press me</button>
<button class="btn btn-rect btn-grad btn-primary">press me</button>
<button class="btn btn-rect btn-grad btn-info">press me</button>
<button class="btn btn-rect btn-grad btn-success">press me</button>
<button class="btn btn-rect btn-grad btn-warning">press me</button>
<button class="btn btn-rect btn-grad btn-danger">press me</button>>
	

Line&Rectangle Button


<button class="btn btn-line btn-rect btn-default">press me</button>
<button class="btn btn-line btn-rect btn-primary">press me</button>
<button class="btn btn-line btn-rect btn-info">press me</button>
<button class="btn btn-line btn-rect btn-success">press me</button>
<button class="btn btn-line btn-rect btn-warning">press me</button>
<button class="btn btn-line btn-rect btn-danger">press me</button>
	

Pill&Line Button


<button class="btn btn-pill btn-line btn-default">press me</button>
<button class="btn btn-pill btn-line btn-primary">press me</button>
<button class="btn btn-pill btn-line btn-info">press me</button>
<button class="btn btn-pill btn-line btn-success btn-xs">press me</button>
<button class="btn btn-pill btn-line btn-warning btn-sm">press me</button>
<button class="btn btn-pill btn-line btn-danger btn-lg">press me</button>
	

Pill&Gradient Button


<button class="btn btn-pill btn-grad btn-default">press me</button>
<button class="btn btn-pill btn-grad btn-primary">press me</button>
<button class="btn btn-pill btn-grad btn-info">press me</button>
<button class="btn btn-pill btn-grad btn-success btn-xs">press me</button>
<button class="btn btn-pill btn-grad btn-warning btn-sm">press me</button>
<button class="btn btn-pill btn-grad btn-danger btn-lg">press me</button>
	

Circle&Line Button


<button class="btn btn-circle btn-line btn-default">press me</button>
<button class="btn btn-circle btn-line btn-primary">press me</button>
<button class="btn btn-circle btn-line btn-info">press me</button>
<button class="btn btn-circle btn-line btn-success btn-xs">press me</button>
<button class="btn btn-circle btn-line btn-warning btn-sm">press me</button>
<button class="btn btn-circle btn-line btn-danger btn-lg">press me</button>
	

Circle&Gradient Button


<button class="btn btn-circle btn-grad btn-default">press me</button>
<button class="btn btn-circle btn-grad btn-primary">press me</button>
<button class="btn btn-circle btn-grad btn-info">press me</button>
<button class="btn btn-circle btn-grad btn-success btn-xs">press me</button>
<button class="btn btn-circle btn-grad btn-warning btn-sm">press me</button>
<button class="btn btn-circle btn-grad btn-danger btn-lg">press me</button>
	

Pill&3d Button


<button class="btn btn-3d btn-pill btn-default">press me</button>
<button class="btn btn-3d btn-pill btn-primary">press me</button>
<button class="btn btn-3d btn-pill btn-info">press me</button>
<button class="btn btn-3d btn-pill btn-success btn-xs">press me</button>
<button class="btn btn-3d btn-pill btn-warning btn-sm">press me</button>
<button class="btn btn-3d btn-pill btn-danger btn-lg">press me</button>
	

Circle&3d Button


<button class="btn btn-3d btn-circle btn-default">press me</button>
<button class="btn btn-3d btn-circle btn-primary">press me</button>
<button class="btn btn-3d btn-circle btn-info">press me</button>
<button class="btn btn-3d btn-circle btn-success btn-xs">press me</button>
<button class="btn btn-3d btn-circle btn-warning btn-sm">press me</button>
<button class="btn btn-3d btn-circle btn-danger btn-lg">press me</button>