خودتان امتحان کنید

<!DOCTYPE html>
<html lang="fa">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>پروژه محور- بیاموز</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">    
		<link rel="stylesheet" type="text/css" href="project_base/css/font-awesome.min.css" />
		<style>
		body {
		  background-color:#d34c65;
		  text-align:center;
		}

div {
		  display: inline-block;
		  position:absolute;
		  top:50%;
		  left:50%;
		  transform:translate(-50%,-50%);
		  -ms-transform:translate(-50%,-50%);
		  -webkit-transform:translate(-50%,-50%);
		  -moz-transform:translate(-50%,-50%);
		  -o-transform:translate(-50%,-50%);
		}

a
		{
			color:#fff;
			background-color:#BD6E82;
			border-radius:4px;
			text-align:center;
			text-decoration:none;
			font-family:FontAwesome;
			position:relative;
			width:40px;
			height:28px;
			display:inline-block;
			padding-top:12px;
			margin:0 2px;
			transition:all 0.5s ease-in-out;
			-moz-transition:all 0.5s ease-in-out;
		}

a:hover
		{
			background-color:#ef92a3;
		}

a span
		{
			color:#666;
			position:absolute;
			font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
			bottom:0px;
			left:-25px;
			right:-25px;
			padding:5px 7px;
			font-size:14px;
			z-index:-1;
			border-radius:2px;
			background-color:#fff;
			visibility:hidden;
			opacity:0;
			transition:all 0.5s ease-in-out;
			-webkit-transition:all 0.5s ease-in-out;
			-moz-transition:all 0.5s ease-in-out;
		}
		a span:before 
		{
			content:'';
			width:0px;
			height:0px;
			border-left:5px solid transparent;
			border-right:5px solid transparent;
			border-top:5px solid #fff;

position:absolute;
			bottom:-5px;
			left:40px;

}

a:hover span
		{
			opacity:1;
			visibility:visible;
			bottom:50px;
		}

a:nth-of-type(1):before {
		content:'\f09a';
		}
		a:nth-of-type(2):before {
		content:'\f099';
		}
		a:nth-of-type(3):before {
		content:'\f0d5';
		}
		a:nth-of-type(4):before {
		content:'\f113';
		}
		</style>            
    </head>
    <body>              
       <div>       
		   <a href="#"><span>face book</span></a>
		   <a href="#"><span>twitter</span></a>
		   <a href="#"><span>Github</span></a>
		   <a href="#"><span>Dribble</span></a>
       </div>         
    </body>
</html>

Report a Problem: