Social Icons Transition

Developer
Andy Lorimer
Size
2,054 Kb
Views
50,600
  1. Social Icons Transition Previews
  2. Social Icons Transition HTML Codes
  3. Social Icons Transition CSS Codes

How do I make an social icons transition?

Hover each to see the cool transition.. What is a social icons transition? How do you make a social icons transition? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

Social Icons Transition Previews
IQ Test

Social Icons Transition - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icons Transition</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3>Hover over each to see the cool transition</h3>
<div class="wrapper"> <ul> <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li> <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li> <li class="pinterest"><a href="#"><i class="fa fa-pinterest"></i></a></li> </ul>
</div>
</body>
</html>

Social Icons Transition - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Lato');
body { margin: 0; padding: 0;
}
.wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 20px; text-align: center;
}
h3 { position: absolute; width: 100%; text-align: center; top: 0; font-family: 'Lato'; padding: 20px 0;
}
ul { margin: 0; padding: 0; list-style-type: none;
}
li { position: relative; display: inline-block; margin: 0 10px;
}
li a { position: relative; display: inline-block; width: 70px; height: 70px; background: #e9e9e9; text-align: center; line-height: 70px; font-size: 17px; color: #fff; border-radius: 100%; overflow: hidden; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
li.twitter a { background: #4099FF;
}
li.facebook a { background: #3b5998;
}
li.pinterest a { background: #cb2027;
}
li a:after { content: ''; position: absolute; background: #fff; width: 100%; height: 100%; top: 0; left: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; border-radius: 100%;
}
li i { position: relative; z-index: 1;
}
li a:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);
}
li.twitter a:hover { color: #4099FF;
}
li.facebook a:hover { color: #3b5998;
}
li.pinterest a:hover { color: #cb2027;
}
li a:hover:after { -webkit-transform: scale(.95); -moz-transform: scale(.95); -o-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95);
}
Social Icons Transition - Script Codes
Social Icons Transition - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 2,054 Kb
Views 50,600
Do you need developer help for Social Icons Transition?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Lorimer (andylorimer) Script Codes
Name
Sign-up Card
Feature Slider
Scroll down button
Password Input
Vertically aligning content
More button Loader
Random Spinning loader
Dropzone Uploader
Searchbar with Navigation
Loading Animation
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!