Roll Over Social Buttons

Developer
Hugo DarbyBrown
Size
2,811 Kb
Views
34,408
  1. Roll Over Social Buttons Previews
  2. Roll Over Social Buttons HTML Codes
  3. Roll Over Social Buttons CSS Codes

How do I make an roll over social buttons?

What is a roll over social buttons? How do you make a roll over social buttons? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

Roll Over Social Buttons Previews
IQ Test

Roll Over Social Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Roll Over Social Buttons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-soundcloud"></a>
<a href="#" class="fa fa-pinterest"></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Roll Over Social Buttons - Script Codes CSS Codes

*, *:after, *:before { box-sizing: border-box;
}
.fa { height: 2em; font-size: 3em; overflow: hidden; margin: 0.5em; position: relative; text-decoration: none; width: 2em; -webkit-backface-visibility: hidden;
}
.fa:before, .fa:after { left: 0; position: absolute; text-align: center; -webkit-transition: 0.5s; transition: 0.5s; top: 50%; width: 100%;
}
.fa:before { color: white; -webkit-transform: translate3D(0, -50%, 0); transform: translate3D(0, -50%, 0); z-index: 2;
}
.fa:after { padding-bottom: 25%; padding-top: 300%; top: 0;
}
.fa:hover:after { -webkit-transform: translate3D(0, -73%, 0); transform: translate3D(0, -73%, 0);
}
.fa:hover:before { -webkit-transform: translate3D(0, -250%, 0); transform: translate3D(0, -250%, 0);
}
.fa-twitter:after { background-image: -webkit-linear-gradient(#00acee 25%, #ffffff 75%); background-image: linear-gradient(#00acee 25%, #ffffff 75%); content: "\\f099"; color: #00acee;
}
.fa-facebook:after { background-image: -webkit-linear-gradient(#3b5998 25%, #ffffff 75%); background-image: linear-gradient(#3b5998 25%, #ffffff 75%); content: "\\f09a"; color: #3b5998;
}
.fa-pinterest:after { background-image: -webkit-linear-gradient(#cb2027 25%, #ffffff 75%); background-image: linear-gradient(#cb2027 25%, #ffffff 75%); content: "\\f0d2"; color: #cb2027;
}
.fa-youtube:after { background-image: -webkit-linear-gradient(#bb0000 25%, #ffffff 75%); background-image: linear-gradient(#bb0000 25%, #ffffff 75%); content: "\\f167"; color: #b00;
}
.fa-soundcloud:after { background-image: -webkit-linear-gradient(#ff5700 25%, #ffffff 75%); background-image: linear-gradient(#ff5700 25%, #ffffff 75%); content: "\\f1be\a"; color: #FF5700;
}
html { background: -webkit-radial-gradient(#222222, #000000); background: radial-gradient(#222222, #000000); height: 100%; text-align: center;
}
body { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%;
}
Roll Over Social Buttons - Script Codes
Roll Over Social Buttons - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 2,811 Kb
Views 34,408
Do you need developer help for Roll Over Social Buttons?

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!

Hugo DarbyBrown (hugo) Script Codes
Name
Zocial Buttons
Concept mobile navigation
Slide Icon Menu
Scroll Overflow Menu
Social-Media Card
LunchBreak Sassing
DNA Double Helix
Animated Atom Logo
Iron Man Login Form
Animated Navicons
Create amazing art & images 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!