Add Social Links in Website Using BootStrap
Add Social Links in Website Using Bootstrap
____________
ASPX Code
____________
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Link.aspx.cs" Inherits="Links_Portal.Link" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Links</title>
<link rel="stylesheet" href="StyleSheet1.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"/>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
</ul>
</div>
</form>
</body>
</html>
_____________
Stylesheet Code
_____________
body
{
margin:0;
padding:0;
background:#262626;
}
ul
{
display:flex;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
ul li
{
list-style:none;
}
ul li a
{
width:50px;
height:50px;
background:#fff;
text-align:center;
line-height:50px;
font-size:35px;
margin:0 10px;
display:block;
border-radius:50%;
position:relative;
overflow:hidden;
border:3px solid #fff;
z-index:1;
}
ul li a .fa
{
position:relative;
color:#262626;
transition: .5s;
z-index:3;
}
ul li a:hover .fa
{
color:#fff;
transform:rotateY(360deg);
}
ul li a:before
{
content:'';
position:absolute;
top:100%;
left:0;
width:100%;
height:100%;
background:#f00;
transition:.5s;
z-index:2;
}
ul li a:hover:before
{
top:0;
}
ul li:nth-child(1) a:before
{
background: #3b5999;
}
ul li:nth-child(2) a:before {
background: #e4405f;
}
ul li:nth-child(3) a:before {
background: #55acee;
}
ul li:nth-child(4) a:before {
background: #cd201f;
}
Super effects...thanks. ..very useful
ReplyDelete