30+ Social Icon and Buttons Design CSS Examples

Social media icons and buttons are the compulsory part of any website. For sharing or linking to social icon is a priority to bring people’s attention. Social media has become a launch vehicle for any business to bloom. There are lots of articles and download option available online for icons and buttons. There are many web fonts available which are designed to show social media icons. You can make buttons with these font icons as well. With these social icons and button, your website looks pleasantly good.

Users find it convenient to share content on social media if these icons are displayed on articles posted. Having said all, it has become part of web and it is mandatory to have good looking and attractive icons and buttons on your website.

I have collected some of these good looking icons and buttons which not only look so beautiful but their coding is very simple to implement. Have a look at these!

Flat Social Icon

Flat social icons using pure CSS (SCSS) has been beautifully coded by Steven Roberts using HTML and Entypo web font.

Flat Social Icon

Rotating Social Icons on Page Scroll

Rotating social icons on page scroll is awesome and one of its kind. This pen is coded by Chris Sevilleja with the use of HTML, CSS and JS.

Rotating Social Icons on Page Scroll

Social Icon Hover Boxes

Nicholas M. Smith has coded for social icons with hover boxes. He has used HTML and SCSS for such a beautiful social icons.

Social Icon Hover Boxes

Font Awesome Colored – Brand And Social Icons

Using Font Awesome social media icons, Amey Raut has designed beautiful set of social media icons with hover animation effects. They are quite beautiful.

Font Awesome Colored

SCSS Social Icons Flat

Matt Litherland has coded a pen for social icons flat with HTML, SCSS and JS. These icons uses Zocial web font.

SCSS Social Icons Flat

Social Icon animation from one points

Brian Phillips has coded beautiful social icon with animations on hover. It uses HTML, SCSS and JS to show the effect.

Social Icon animation

Social Icon Buttons with text and icon

Social icon buttons are beautifully designed with hover effects by Chris Steurer.

Social Icon Buttons with text and icon

Social Icons with Long Shadow

This is looking awesome social icons with long shadow effects. These icons are beautifully coded by Driss.

Social Icons with Long Shadow

Various Share Button Styles

Mark Murray has coded social icons with beautiful set of designs. He uses HAML and SCSS for his coding.

Various Share Button Styles

Social Icon Effect Demo

Social Icons are designed by KuetTai Yong which is beautifully designed and some animation effects are also coded which makes it really nice.

Social Icon Effect Demo

Letterpress social icons

Hornebom has coded a beautiful set of social icons with Zocial font. They are grey in color and round in shape.

Letterpress social icons

Social Icon Animation with border and icon

Social icons animations are presented by Jitendra who used HTML and CSS in his coding. These animated icons are looking beautiful.

Social Icon Animation with border and icon

Social Icons with hover effect opacity

Social icons are coded beautifully by Luky VJ with HTML and SCSS. They are looking awesome.

gliffy

Social Icon Light Show

Daniel Eisenbarger coded fancy social icons with blinking light effects. This coding uses Pug, Stylus and CoffeeScript.

Social Icon Light Show

Dan Malarkey has coded beautiful animated social buttons on hover.

beautiful animated social buttons on hover

Social Icons Hover Effect on background animation

Hover effect of a default color on a button of social media has been coded by Mike. It is coded in Pug and Stylus.

Social Icons Hover Effect on background animation

Social Icons with SVG and SCSS looks beautiful and is coded by Mark Thomes.

Social Icons with SVG

Fancy Hover Social Buttons

Excellent coding by Ben Hodgson for a fancy hover social media buttons. With HTML and SCSS coding these social buttons looks so beautiful.

fancy hover social media buttons

A fancy social media icons are coded by Christophe Chabot which expands on mouse over.

Fancy Social Media Icons

Social Media icon with hover shaddow effect

I am Nathan J has coded social icons with shadow effect using Pug and Stylus. It is very beautifully coded, please check the pen.

Social Media icon with hover shaddow effect

Michael Amrozaitis has designed beautiful social media links with SVG and SCSS.

SVG Social Links

A social icon strip has been coded by Eric with SCSS and Pug coding.

beautiful social icon with horizontal row

Vertical fixed social icons

This is fixed social icon positioned left side which displays social name when mouse over. This snippet has been coded by Lazare.

Vertical fixed social icons

Quick Flat Social Buttons

These social icons are flat, simple written with LESS and integrated Font Awesome. It has been coded by Joseph Shambrook.

Quick Flat Social Buttons

This social icon net like design coded by Szymon Dziewonski which is looking very nice.

Social Icons net animation

Marcelo Ribeiro coded beautiful SVG social icons which are looking very cool.

SVG Social Icons

Social Buttons and Share Count

This code is written for social buttons with share count and compares this with old default social share buttons. This is coded by Ariana Lynn.

Social Buttons and Share Count

Renan Pupin has designed UI like social icons with the use of Font Awesome.

Social Icons Style - UI Design

This snippet is written by 5eleven7 which displays social icons with animations.

SVG - Social Icon Animation

Hexagon Social Icons

Bryce Stradling has designed some hexagon social icons with the use of HTML, Font Awesome and CSS.

Hexagon Social Icons

Icon font and CSS social tabs

Morten Rand-Hendriksen uses Font Awesome icons to a good effect which turns out a beautiful social icon tabs.

Icon font and CSS social tabs

Social icon with hover effect background come up

Michael Vieth has coded social links from their respective logo color which is named social icon hover effect.

Social icon with hover effect background come up

This snippet is coded by Havard Brynjulfsen which is a floating social icon buttons.

Floating social icon buttons | CSS Only

Flat Ui icon with hover animation

A social icon is covered by a layer has been coded by Patrick which looks beautiful. When you mouse over the picture the layer slides down and the social icons are visible.

Flat Ui icon with hover animation

Hexacon Social Icons Design

A hexagon social icons have been coded by Mr. Pirrera. It looks beautiful and for the social icon, Font Awesome has been used.

Hexacon Social Icons Design

Custom Share Icons (with count)

Custom share icons with counts have been coded by Gray Gilmore which is looking impressive. Though Google+ requires API to show share counts which has been not included in his coding.

Custom Share Icons (with count)

Social Network Icons

A social icons on left and right side of page and position fixed are looking good. This’s been coded by Andreas Eracleous.

Social Network Icons

Animated social icon with rotate effect

This snippet is about beautiful animated social icons that uses web font icomoon. This pen is coded by James Fleeting.

Animated social icon with rotate effect
November 24, 2017 by shashi singh
3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *