StumbleUpon Button for Bootstrap using Sass and Font Awesome

Learn how-to create a StumbleUpon social sharing button for the Bootstrap front-end framework using Sass and Font Awesome.

You must have Bootstrap and Font Awesome already added to your website.

HTML

Add the following where you wish the StumbleUpon button to appear.

<a href="#" title="StumbleUpon" class="btn btn-stumbleupon btn-lg"><i class="fa fa-stumbleupon fa-fw"></i> StumbleUpon</a>

Sass

.btn-stumbleupon {
	  background: #fF4425;
	  border-radius: 0;
	  color: #fff;
	  border-width: 1px;
	  border-style: solid;
	  border-color: #d71f00;
	}
	.btn-stumbleupon:link, .btn-stumbleupon:visited {
	  color: #fff;
	}
	.btn-stumbleupon:active, .btn-stumbleupon:hover {
	  background: #d71f00;
	  color: #fff;
	}
    

CSS

.btn-stumbleupon {
  background: #fF4425;
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #d71f00;
}

.btn-stumbleupon:link, .btn-stumbleupon:visited {
  color: #fff;
}

.btn-stumbleupon:active, .btn-stumbleupon:hover {
  background: #d71f00;
  color: #fff;
}