Today I will show you how to create a 3D social media buttons using only CSS3 and FontAwsome. Every designer wants once in a while a free ready designed elements to be used on their projects. While there are a lot free social media buttons already in PSD format that doesn’t mean, we can’t use pure CSS to create them. Without no more talk about the importance of using social media buttons on every website, let’s begin.
First of all we need to download FontAwsome and declare it in header.
<link type="text/css" rel="stylesheet" href="css/font-awesome.css" />
A common mistake is not to edit the location of the font. In font-awesome.css on line 8 you’ll find what you need:
@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.0.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format
('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.3')
format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3')
format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
Just use your font location and you’ll be fine.
The markup
Now that we have FontAwsome properly installed let’s start coding. Since this is a link button, the mark-up it’s simple.
<a href="#" class="facebook socialBtn ">Facebook</a>
Where socialBTN is the general button style and Facebook it’s the class we use for styling every button differently.
Styling the default button class
First thing to do is to edit the general class. This is the the main style of the button, basically this is the default button.
.socialBtn { cursor: pointer; display: inline-block; text-shadow: 3px 3px 2px rgba(0, 0, 0, .1) !important; width: 11em; padding: 22px 25px 18px 25px; font-family: "Open Sans", Helvetica, Arial, sans-serif; text-align: center; font-size: 1.4em; font-weight: 300; vertical-align: middle; text-transform: uppercase; text-decoration: none; line-height: 1em; color: #fff; /* Background transition */ -webkit-transition: background-color 100ms linear; -moz-transition: background-color 100ms linear; -o-transition: background-color 100ms linear; -ms-transition: background-color 100ms linear; transition: background-color 100ms linear; }
Now using :before we call the icons for the button.
.socialBtn:before { font-family: "FontAwesome"; font-size: 25px; /* This is the icon size, you can change it to your needs */ font-weight: normal !important; line-height: 0; margin:8px 10px 0 ; position: relative; width: 40px; top: 2px; }
We also need to declare the active state of the button. When pressed will behave like a 3D button.
.socialBtn:active { -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); transform: translate(0, 4px); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; transition: all .1s ease-in-out; }
We have the default button ready, as well as active state. We can’t see a preview now, because the button style has no background.
Styling every button differently
Like i show you in the mark-up , every button will have an additional class for every social network you choose. For this example we’re gonna use Facebook.
.facebook { background: #4060A5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0px -1px 0px rgba(0,0,0,.5); } .facebook:hover { background:#5172b8; }
This is how it looks so far.
Now is the time to do the magic. We’re gonna add the shadow style for making look like 3D.
.facebook { -webkit-box-shadow: 0px 6px 0px #3a5ba2, 0px 3px 11px rgba(0,0,0,.4),
inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); -moz-box-shadow: 0px 6px 0px #3a5ba2, 0px 3px 11px rgba(0,0,0,.4),
inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5); box-shadow: 0px 6px 0px #3a5ba2, 0px 3px 11px rgba(0,0,0,.5),
inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 1px rgba(255,255,255,.5);
We have the button ready, let’s add FontAwsome.
.facebook:before { color: #fff; /* This is the color value for button icon */ content: "\f09a"; /* Change this value to whatever you want */ left: -5px; }
And voila now we have a 3D button created only with CSS3. To know exactly what’s the correct value for content check this complete list of Font Awesome icons and their CSS content values.
We need to do one more thing before we close this. Every social class need to have active state styled. You may ask why since it’s already in the default button style? When pressed you need shadows, to emulate as much as possible a 3D action. If you do this in the default state, every button will have the same shadow when pressed.
.facebook:active { -webkit-box-shadow: 0 2px 0 #3a5ba2, 0 1px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 2px 0 #3a5ba2, 0 1px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 2px 0 #3a5ba2, 0 1px 6px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 3px rgba(255, 255, 255, 0.5) inset; }
If you look carefully the value #3a5ba2 it’s the same with .facebook shadow color.
And that will be all. Remember by changing the content value, background and shadow color you can transform these buttons into whatever you want.
Comment With The Topic