Creating 13 Social Media Buttons With Cool Effect

When visiting various websites we often find social media buttons with a variety of interesting effects.

Though nothing to do with SEO, an attractive design can sometimes increase visitors trust to your website, hence we need somewhat pay attention to it.

There are plenty of tutorials about how to do it, you can do a search via Google, but now you may want to see something different here that might interesting and works best on your website.

There are 13 -ready to use- social media button with different effects, fell free to learn the css code by clicking the “Demo #X” button link on each effect section.

This will bring you to a new tab/page, just view the source (by right click » view source) to see the CSS code that used. Anyway here is the complete demo.

Browser support

All of these effects use transition property which makes the transition of element run smoothly.

As this property exists in CSS 3, it would not compatible to old browsers, even in Internet Explorer 9, this browser starts to support it from version 10.

Nevertheless, in version 9 and below, this button will still look good and work properly but without effect, for the complete list of compatible browser of transition property, please visit this page.

Preparation

Before going further, it is necessary to know the type of icon being used. In this tutorial we use icon fonts, I take it from icomoon, you could also use your own favorite icon font.

For the global CSS definition, we first create a css file named: effect_main_single.css, this file will always be used in all effect, the CSS code is:

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon/icomoon.eot?w6aef1');
	src:url('fonts/icomoon/icomoon.eot?w6aef1#iefix') format('embedded-opentype'),
		url('fonts/icomoon/icomoon.ttf?w6aef1') format('truetype'),
		url('fonts/icomoon/icomoon.woff?w6aef1') format('woff'),
		url('fonts/icomoon/icomoon.svg?w6aef1#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	speak: none;
}
a {
	color: #5D5D5D;
	font-family: icomoon;
    font-size: 40px;
	line-height: 65px;
	text-decoration: none;
	text-align: center;
    display: inline-block;
	position: relative;
    width: 64px;
    height: 64px;
	overflow: hidden;
	transition: all .3s;
}
a:before,
a:after {
	transition: all .3s;
}

Folder structure

I create a separate HTML file for each effect, I named the file using a pattern: effect_(number).html and effect_(number)_single.html, where (number) is the sequence of effect, the xxx_single.html file is intended to learn the css code easily, here is the preview of the folder structure:

Create Social Media Button - Folder Structure

Effect #1: Social Media Button With Slide Up Effect

Here we use ::before and ::after pseudo-element which has its own icon. This effect would shift these elements from bottom to the top and change the background-color simultaneously. Example for a set of different icon:

Demo #1

Effect #2: Social Media Button With Slide to Right Effect

In this effect, we also use the pseudo element ::before and ::after as icon container, this effect will shift these elements to the right simultaneously. Here is example for a set of different icon:

Demo #2

Effect #3: Social Media Button With Cube Effect

This effect will rotate the element like cube, there are two ideas about how to get the 3D view of the cube:

a. Not Really Like Cube

The transition of the elements was as though like a cube, but not really like it, as a little overlap occurs between the elements.

With the small value of the transition, the overlapping is invisible, what appears is a shifting smooth elements, coupled with the fade in-out effect, will beautify the resulting effect.

Demo #3

b. Cube-Like Transition

Unlike the previous version, in this version, the element will move in sequence, no overlapping here, so it will be really like a cube that rotates.

There are several techniques to create this effect, to be considered is: whether there is “zoom” on the elements? both before and after animation.

If yes, then you should find other alternative ways because it will pixelate the text, one of the solutions is to make each side of the cube independently and has its own transition.

Demo #3.1

Effect #4: Flip Effect

This effect will create a moving element with a particular axis, the example below will move the element to the back.

With the bottom as its axis, you may want to see the downloaded version, as it will employ another different axis (left, right, and top), so check it out.

Demo #4

Effect #5: Social Media Button With Rotating Icon Effect

This effect simply rotate the icon 360 ° clockwise, we use transform property to perform this task, you may want to use any other properties to make more interesting effect (eg: changing the font-size).

Demo #5

Effect #6: Social Media Icon With Glow Effect

With the difference of the color contrast between the background and the icon, and by selecting the right combination of color, we will get the glowing effect.

Technically this effect just changes the color of the icon when :hover event occurs,  the transition property make the change of the color run smoothly, so it looks like glowing.

Demo #6

Effect #7: Slide Up Background Element

What happens is ::before element that contains icon is directly in front of <a> element, while the ::after element which has the same dimension is under.

When :hover event occur, ::after element shifts up, so that covers <a> element, but still behind ::before element. It is possible by defining z-index property for ::after element to -1.

Demo #7

Effect #8: Social Media Button With Lift Up Icon Effect

This effect will simply lifted up the icon’s element slightly so that the hidden text will be visible.

Demo #8

Effect #9: Grow Up Background Element

This is somewhat another cool effect, firstly the front element (::after) that has its own icon, has different color with minimum of height (about 5px).

When the mouse is over the element, it will grow up until has same dimension with the element behind (::before element).

Demo #9

Effect #10: Social Media Button With 3D Rotate Icon Element

This cool effect will make the front element (::after) appear rotated from behind, first, it rotated backward about 275°, when the mouse is over the element, it rotated back to the front with its top as its axis.

Demo #10

Effect #11: Social Media Button With Zoom-Out and Glow Icon

This is mostly same as effect #6, with addition of zoom-out effect, first, the front element (::after) is scaled up (about 1.2), rotated (about 15°) and not visible.

When the mouse is over the element, it scaled down to its original scale (1.0), rotated to (0°), and gradually visible. You want to use very contrast color (dark and light) in order to achieve the glowing effect.

Demo #11

Effect #12: Fade-In + Zoom-out Circle Background

The idea is, first, we make the front element  (::after) invisible and scaled about 1.2 bigger than element behind (<a> element).

When the :hover event triggered, the ::after pseudo element are faded in dan zoomed out until have the same size as the element behind (anchor element).

Demo #12

Effect #13: Social Media Button Growing Circle Background

This is most likely same as previous effect, but in reversed. When the mouse is over the button, the front element (::after) that is act as new background growing up from the center, from 0 size to the same size of the anchor element.

In addition, we add some box shadow to the anchor element that add some nice visual effect.

Demo #13

Closing

That’s 13 social media icon with somewhat coll effect, hopefully it can inspire you to develop social media button that suits to your site.

Leave a comment