<html lang="ar" dir="rtl">
<head><meta charset="utf-8">
<title>Button</title>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head><body><div class="con">
<a class="b6n" href="#">تسجيل الدخول</a>
</div></body></html>*{ box- sizing:border- box; box- sizing:border- box;box- sizing:border- box; box- sizing:border- box;margin:0;padding:0;outline:0;border:0; font- smoothing:antialiased}
*{box-sizing:border-box;box-sizing:border-box;box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;outline:0;border:0;font-smoothing:antialiased}body{background-color:#f8f8f8}
.con {position: absolute;
top: 50%;
right: 50%;
margin-top: -30px;
margin-right: -128px;
width: 256px;
height: 60px;
}
a.b6n {
display: block;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #1abc9c;
box-shadow: 0 -4px 0 0 #16a085 inset;
box-shadow: 0 -4px 0 0 #16a085 inset;
color: #f8f8f8;
text-align: center;
text-decoration: none;
font: bold 22px/56px Helvetica, sans-serif;
}
a.b6n:hover {
background-color: #27C9A9;
color: white;
}
a.b6n:active {
margin-top: 4px;
height: 58px;
background-color: #1abc9c;
box-shadow: none;
box-shadow: none;
}