Basic Buttons


We took the time to restyle Bootstraps button options to match Raleway, you have every button you might need depending on the situation, simply choose what you need and paste the shortcode. We also added a couple of extra kicks and bangs.

Default Button .btn .btn-default Default Button .btn .btn-default .btn-rw
Primary Button .btn .btn-primary Primary Button .btn .btn-primary .btn-rw
Success Button .btn .btn-success Success Button .btn .btn-success .btn-rw
Info Button .btn .btn-info Info Button .btn .btn-info .btn-rw
Warning Button .btn .btn-warning Warning Button .btn .btn-warning .btn-rw
Danger Button .btn .btn-danger Danger Button .btn .btn-danger .btn-rw
.btn .btn-royal .btn .btn-royal .btn-rw

Button Sizes

Adjusting button sizes is very simple, and you can adjust the size of any button, or component that uses the btn class. Simply add the corresponding size class to the button you want to make larger or smaller.

Primary Large Primary Small Primary Extra Small Primary Large Primary Small Primary Extra Small

<a href="#" class="btn btn-rw btn-primary btn-lg">Primary Large</a>
<a href="#" class="btn btn-rw btn-primary btn-sm">Primary Small</a>
<a href="#" class="btn btn-rw btn-primary btn-xs">Primary Extra Small</a>

<a href="#" class="btn btn-primary btn-lg">Primary Large</a>
<a href="#" class="btn btn-primary btn-sm">Primary Small</a>
<a href="#" class="btn btn-primary btn-xs">Primary Extra Small</a>

Block Level Raleway

Default Primary Success Info Warning Danger

<a href="#" class="btn btn-rw btn-block btn-default">Default</a>
<a href="#" class="btn btn-rw btn-block btn-primary">Primary</a>
<a href="#" class="btn btn-rw btn-block btn-success">Success</a>
<a href="#" class="btn btn-rw btn-block btn-info">Info</a>
<a href="#" class="btn btn-rw btn-block btn-warning">Warning</a>
<a href="#" class="btn btn-rw btn-block btn-danger">Danger</a>
<button type="button" class="btn btn-rw btn-block btn-royal">Royal Button</button>

Block Level Bootstrap

Default Primary Success Info Warning Danger

<a href="#" class="btn btn-block btn-default">Default</a>
<a href="#" class="btn btn-block btn-primary">Primary</a>
<a href="#" class="btn btn-block btn-success">Success</a>
<a href="#" class="btn btn-block btn-info">Info</a>
<a href="#" class="btn btn-block btn-warning">Warning</a>
<a href="#" class="btn btn-block btn-danger">Danger</a>
<button type="button" class="btn btn-block btn-royal">Royal Button</button>

Button Markup

Link Link
<a href="#" class="btn btn-primary">Link</a>
<button class="btn btn-primary">Button</button>
<button type="submit" class="btn btn-primary">Submit</button>

<a href="#" class="btn btn-rw btn-primary">Link</a>
<button class="btn btn-rw btn-primary">Button</button>
<button type="submit" class="btn btn-rw btn-primary">Submit</button>

Content Dropdown

<!--=== Content Dropdown ===-->
<div class="dropdown mb15">
	<button class="btn btn-rw btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
		<span class="caret"></span>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

<!--=== Content Dropdown w Buttons ===-->
<div class="btn-group">
	<button type="button" class="btn btn-rw btn-default">1</button>
	<button type="button" class="btn btn-rw btn-default">2</button>
	<button type="button" class="btn btn-rw btn-default">3</button>
	<button type="button" class="btn btn-rw btn-default">4</button>

	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-default dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Dropdown link</a></li>
			<li><a href="#">Dropdown link</a></li>

Button Groups

Wrap a series of buttons with .btn in .btn-group. Adjust sizes, or use any of the other button classes, to do what you need to do.

<div class="btn-group">
	<button type="button" class="btn btn-rw btn-default">Left</button>
	<button type="button" class="btn btn-rw btn-default">Middle</button>
	<button type="button" class="btn btn-rw btn-default">Right</button>
Button Toolbar:

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">1</button>
		<button type="button" class="btn btn-rw btn-info">2</button>
		<button type="button" class="btn btn-rw btn-info">3</button>
		<button type="button" class="btn btn-rw btn-info">4</button>
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">5</button>
		<button type="button" class="btn btn-rw btn-info">6</button>
		<button type="button" class="btn btn-rw btn-info">7</button>
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-info">8</button>

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group.

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-lg">
		<button type="button" class="btn btn-rw btn-danger">Left</button>
		<button type="button" class="btn btn-rw btn-danger">Middle</button>
		<button type="button" class="btn btn-rw btn-danger">Right</button>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-rw btn-warning">Left</button>
		<button type="button" class="btn btn-rw btn-warning">Middle</button>
		<button type="button" class="btn btn-rw btn-warning">Right</button>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-sm">
		<button type="button" class="btn btn-rw btn-success">Left</button>
		<button type="button" class="btn btn-rw btn-success">Middle</button>
		<button type="button" class="btn btn-rw btn-success">Right</button>
<div class="btn-toolbar" role="toolbar">
	<div class="btn-group btn-group-xs">
		<button type="button" class="btn btn-rw btn-info">Left</button>
		<button type="button" class="btn btn-rw btn-info">Middle</button>
		<button type="button" class="btn btn-rw btn-info">Right</button>

Raleway Bootstrap 3 Template is what you need for your next project or client.

Buy now

228 Park Ave S New York, NY 10003