Google+ Button for Bootstrap using Sass and Font Awesome

Learn how-to create a Google+ 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 Google+ button to appear.

<a href="#" title="Google+" class="btn btn-googleplus btn-lg"><i class="fa fa-google-plus fa-fw"></i> Google+</a>

Sass

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

CSS

.btn-googleplus {
  background: #E93F2E;
  border-radius: 0;
  color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #b72213;
}

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

.btn-googleplus:active, .btn-googleplus:hover {
  background: #b72213;
  color: #fff;
}