How To Create Social Media Buttons Hover Effect Using HTML & CSS
Create an Animated Social Media Buttons Hover Effect Using HTML and CSS.
#html
#css
#socialmediabutton
#hovereffecthmtlcss
#latesthtmlcss
Like on Facebook:---
https://www.facebook.com/legenddocx-105920114420383/
Subscribe to our Channel:----
https://www.youtube.com/channel/UCh0NCrnU5PUYF04qs21Un8A
Source Code:--
HTML
<html>
<head>
<title>Follow Me</title>
<!-- Latest compiled and minified CSS -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body>
<div class="twitter social-button">
<div class="twitter">
<a href="#" class="youtube_back"><i class="fa fa-twitter "></i>@legenddocx_creation</a>
</div>
<div class="cover">
<div class="inner">
<i class="twitter-logo fa fa-twitter set_icon"></i>
</div>
<div class="edge"></div>
<div class="outer">
<i class="fa fa-twitter set_icon"></i>
</div>
</div>
<div class="shadow"></div>
</div>
<div class="facebook social-button">
<div class="facebook">
<a href="#" class="youtube_back"><i class="fa fa-facebook"></i>@legenddocx_creation</a>
</div>
<div class="cover">
<div class="inner">
<i class="twitter-logo fa fa-facebook set_icon"></i>
</div>
<div class="edge"></div>
<div class="outer">
<i class="fa fa-facebook set_icon "></i>
</div>
</div>
<div class="shadow"></div>
</div>
<div class="youtube social-button">
<div class="youtube">
<a href="#" class="youtube_back"><i class="fa fa-youtube "></i>@legenddocx_creation</a>
</div>
<div class="cover">
<div class="inner">
<a href="#" class="icon_color"><i class="fa fa-youtube set_icon"></i></a>
</div>
<div class="edge"></div>
<div class="outer">
<a href="#" class="icon_color"><i class="fa fa-youtube set_icon "></i></a>
</div>
</div>
<div class="shadow"></div>
</div>
</body>
</html>
CSS
<style>
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
body {
font-size: 22px;
font-family: Arial, sans-serif;
color: #fff;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.social-button {
min-width: 11rem;
display: flex;
justify-content: center;
height: 2.1rem;
padding: 0.375rem 0.375rem 0;
margin-right: 2rem;
background: #eee;
border-radius: 0.25rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
perspective: 30rem;
}
.cover {
transform-origin: center bottom;
transform-style: preserve-3d;
text-align: center;
z-index: 99;
}
.cover,
.cover>* {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner,
.outer {
border-radius: 0.25rem;
background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}
.outer {
transform: translateZ(0.25rem);
}
.edge {
top: 0.25rem;
height: 0.25rem;
transform: rotateX(90deg);
transform-origin: center top;
}
.social-button:hover .cover {
transform: rotateX(-120deg);
}
.social-button,
.social-button div {
transition-duration: 0.7s;
transition-timing-function: ease;
}
.shadow {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3.2rem;
border-radius: 0.5rem;
opacity: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
transform: rotateX(90deg);
transform-origin: center top;
}
.social-button:hover .shadow {
transform: rotateX(45deg) scale(0.95);
opacity: 1;
}
.icon_color {
color: white;
}
.twitter a {
text-decoration: none;
background-color: #00acee;
padding: 5px;
font-size: 15px;
color: white;
align-content: center;
padding-left: 5px;
padding-right: 5px;
font-family: sans-serif;
border-radius: 5px;
}
.facebook a {
text-decoration: none;
background-color: #3b5998;
padding: 5px;
font-size: 15px;
color: white;
align-content: center;
padding-left: 5px;
padding-right: 5px;
font-family: sans-serif;
border-radius: 5px;
}
.youtube a {
text-decoration: none;
background-color: #c4302b;
padding: 5px;
font-size: 15px;
color: white;
align-content: center;
padding-left: 5px;
padding-right: 5px;
font-family: sans-serif;
border-radius: 5px;
}
.twitter
{
margin-top: 5px;
}
.facebook
{
margin-top: 5px;
}
.youtube
{
margin-top: 5px;
}
.set_icon {
margin-top: 8px;
}
.twitter .inner {
background-color: #67e2fe;
}
.twitter .outer {
background-color: #2ec8fa;
}
.twitter .edge {
background-color: #20c7f3;
}
.facebook .inner {
background-color: #3b5998;
}
.facebook .outer {
background-color: #476ab4;
}
.facebook .edge {
background-color: #2f477c;
}
.youtube .inner {
background-color: #ff1d1d;
}
.youtube .outer {
background-color: #ff0000;
}
.youtube .edge {
background-color: #df0000;
}
</style>
Post a Comment