How to make a responsive Google+ Button with CSS3

Image of a Google+ ButtonSo what the heck is a responsive button? For me it’s a button that fits in your responsive webdesign. In this case it’s proportional scalable. That means if you change your font size it scales automatically all properties like border-size, border-radius and padding proportionally. You can do this by using em’s instead of pixels. For more information check the responsive web design article by Ethan Marcotte. I recommend his book.

Demo with 1em (16px) font size

Google+

Demo with a bigger font size

As you can see all properties are scaled proportionally. I’ve just changed the font size to 4em.

<a href="https://plus.google meilleur prix viagra.com/114299331427118716064/” class=”googleplus bigger”>Google+

Source Code

It’s a simple button with CSS3 properties like border-radius, linear-gradient and box-shadow. I used the :before pseudo-element to create the “Google colors”.

Note: I set the font size of the parent element to 16px (default browser font size) and calculated with that. So if you change your default document font size take care of converting your pixels to em’s (required px size / your default font size = px size in em).


.googleplus {
	color: #fff;
	display: inline-block;
	font-family: sans-serif;
	font-size: 1em; /* 16px - parent element has a font size of 16px */
	font-weight: bold;				
	text-decoration: none;
	text-shadow: 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, .5); /* 1px / 16px = 0.0625 */
	border-bottom: 0.0625em solid rgba(0, 0, 0, .65);
	border-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	box-shadow: 0 0.0625em 0.125em #000; /* 1px / 16px = 0.0625 && 2px / 16px = 0.125 */
	padding: 0.4375em 1em; /* 7px / 16px = 0.4375 && 16px = 1 */
	position: relative;
	background: #2d2d2d;
	background: -moz-linear-gradient(top, #2d2d2d 0%, #141414 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#141414));
	background: -webkit-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: -o-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: -ms-linear-gradient(top, #2d2d2d 0%,#141414 100%);
	background: linear-gradient(top, #2d2d2d 0%,#141414 100%);
}

.googleplus:before {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 0.1875em; /* 3px / 16px = 0.1875 */
	margin-bottom: 1px;
	border-top: 0.0625em solid rgba(255, 255, 255, .2); /* 1px / 16px = 0.0625 */
	border-top-left-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	border-top-right-radius: 0.1875em; /* 3px / 16px = 0.1875 */
	background: -moz-linear-gradient(left, #E52D39 0%, #E52D39 25%, #168BE6 25%, #168BE6 50%, #2AC700 50%, #2AC700 75%, #FC0 75%, #FC0 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E52D39), color-stop(25%,#E52D39), color-stop(25%,#168BE6), color-stop(50%,#168BE6), color-stop(50%,#2AC700), color-stop(75%,#2AC700), color-stop(75%,#FC0), color-stop(100%,#FC0));
	background: -webkit-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: -o-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: -ms-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	background: linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0 75%,#FC0 100%);
	content: '';
}

Change the colors for your needs and add some :hover and :active state styles. And please let me know what you think.

Comments

There are no comments yet. You may write the first.

Leave a Reply

Please fill all the fields with the red star *