Social media share button with awesome hover effect using HTML & CSS | Pure CSS social share buttons
Introduction
---------------
In this video tutorial, we will be creating an awesome social media share button hover effect/animation using HTML and CSS only. This is a pure CSS tutorial, no JavaScript is used.
Hover effect / Animation explanation:
---------------
In the beginning, all the social media buttons(Facebook, Instagram, Twitter, and Pinterest) are placed adjacent to each other and each having a black background.
Each social media share button has a square shape and they contain the corresponding social media icon which is invisible initially and there is the word "SHARE" which is placed above the share buttons.
When there is hover on the "SHARE" text then
1. social media share buttons move away from each other horizontally
2. their background color changes, for Facebook it changes to "blue", for Instagram it changes to "pink" similarly "sky blue" for Twitter and "dark red" for Pinterest
3. and icons inside the share buttons become visible.
Subscribe to this channel: http://bit.ly/2DOL8zh
Watch other tutorials:
---------------
1. Navbar using html and css | Navbar css tutorial | Navbar css animation
• Navbar using html and css | Navbar css tut...
2. Menu button and horizontal ellipsis transformation animation
• Menu button and horizontal ellipsis transf...
3. An awesome checkbox animation
• A checkbox animation using HTML and CSS | ...
4. A button hover effect
• Button hover effect | CSS tutorial
Music Credit:
---------------
Trip by KV / kvmusicprod Creative Commons — Attribution 3.0 Unported — CC BY 3.0 http://creativecommons.org/licenses/b...
Music promoted by Audio Library • Trip – KV (No Copyright Music)
We Are One by Vexento / vexento / vexento
Music promoted by Audio Library • We Are One – Vexento (No Copyright Music)
Song: MBB - Arrival(Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link - • MBB - Arrival (Vlog No Copyright Music)
Song: Anywhere - Ikson
SoundCloud Link: / anywhere-free-download
Subscribe or follow WebSlake:
---------------
Subscribe: http://bit.ly/2DOL8zh
Follow on Instagram: / webslake
Follow on Twitter: / webslake
Follow on Facebook: / webslake
Follow on Pinterest: / webslake
Follow on Dribbble: https://www.dribbble.com/WebSlake/
#socialshare #buttons #animation #interaction #userinteraction #microinteraction #webdevelopment #html #html5 #css #css3 #nojavascript #frontenddevelopment #uidevelopment