Ajax Loader
×
HTML
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="ar" dir="rtl">
3
<head>
4
  <meta charset="utf-8">
5
  
6
  <title>Button</title>
7
  
8
  <!-- Mobile Specific Meta -->
9
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
10
 
11
  <!-- Stylesheets -->
12
  <link rel="stylesheet" href="style.css" />
13
 
14
  <!--[if lt IE 9]>
15
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
16
  <![endif]-->
17
</head>
18
<body>
19
 
20
<div class="con">
21
<a class="b6n" href="#">تسجيل الدخول</a>
22
</div>
23
 
24
</body>
25
</html>
 
CSS
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-ms-box-sizing:border-box;margin:0;padding:0;outline:0;border:0;-webkit-font-smoothing:antialiased}
1
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-ms-box-sizing:border-box;margin:0;padding:0;outline:0;border:0;-webkit-font-smoothing:antialiased}
2
body{background-color:#f8f8f8}
3
 
4
.con {
5
  position: absolute;
6
  top: 50%;
7
  right: 50%;
8
  margin-top: -30px;
9
  margin-right: -128px;
10
  width: 256px;
11
  height: 60px;
12
}
13
 
14
a.b6n {
15
  display: block;
16
  width: 100%;
17
  height: 100%;
18
  border-radius: 5px;
19
  background-color: #1abc9c;
20
  -webkit-box-shadow: 0 -4px 0 0 #16a085 inset;
21
  box-shadow: 0 -4px 0 0 #16a085 inset;
22
  color: #f8f8f8;
23
  text-align: center;
24
  text-decoration: none;
25
  font: bold 22px/56px Helvetica, sans-serif;
26
}
27
 
28
a.b6n:hover {
29
  background-color: #27C9A9;
30
  color: white;
31
}
32
 
33
a.b6n:active {
34
  margin-top: 4px;
35
  height: 58px;
36
  background-color: #1abc9c;
37
  -webkit-box-shadow: none;
38
  box-shadow: none;
39
}
 

Untitled

CSSDeck G+