<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<style>
h1, h2, h3 {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
.black{background: #679701;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #679701), to(#99CC66));background-image: -moz-linear-gradient(top , #679701, #99CC66);background-image: linear-gradient(top , #679701, #99CC66);box-shadow: 0px 1px 2px black,inset 0px -20px 30px #679701;color:white;text-shadow:1px 1px #323232;}
.orange{background: #E97E00;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E97E00), to(#E97E00));background-image: -moz-linear-gradient(top , #E97E00, #E97E00);background-image: linear-gradient(top , #E97E00, #E97E00);box-shadow: inset 0px 0px 30px #FFFCE1;color:white;text-shadow:1px 1px #323232;}
.getlink{text-decoration: none;font-size: 30px;font-family: Georgia;line-height: 150%;text-align: center;}
.clickmoon{position:relative;display: block;width:170px;height: 50px;}
.clickmoon a{display: block;position: absolute;top:0px;left: 0px;width:160px;height: 45px;z-index: 10;padding: 5px;background:transparent;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in ;-webkit-transition: all .3s ease-in ;transition:all .3s ease-in;text-decoration: none;}
.clickmoon h1{display: block;position: absolute;top: 0px;left: 0px;width: 80px;height: 45px;z-index: 100;padding: 5px;text-decoration: none;box-shadow: 0px 1px 2px black,inset 0px -20px 30px #000;text-decoration: none;font-size: 30px;font-family: Georgia;text-align: center;line-height: 50px;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in ;-webkit-transition: all .3s ease-in ;transition:all .3s ease-in;border-radius:10px 0px 0px 10px;-moz-box-shadow: 0px 1px 2px black;-webkit-box-shadow: 0px 1px 2px black;}
.clickmoon h2{display: block;position: absolute;top:0px;right: -10px;width: 80px;height: 45px;z-index: 100;padding: 5px;text-decoration: none;text-decoration: none;font-size: 30px;font-family: Georgia;line-height: 150%;text-align: center;line-height: 50px;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in ;-webkit-transition: all .3s ease-in ;transition:all .3s ease-in;border-radius:0px 10px 10px 0px;-moz-box-shadow: 0px 1px 2px black;-webkit-box-shadow: 0px 1px 2px black;}
.clickmoon h3{display: block;position: absolute;top:5px;right: -5px;width: 170px;height: 45px;z-index: 100;font-size: 14px;line-height: 50px;text-decoration: none;z-index: 0;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in ;-webkit-transition: all .3s ease-in ;transition:all .3s ease-in;border-radius:0px 10px 10px 0px;-moz-box-shadow: 0px 1px 2px black;-webkit-box-shadow: 0px 1px 2px black;}
.clickmoon:hover h1{left:-60px;}
.clickmoon:hover h2{right:-60px;}
</style>
<center>
<div class="clickmoon getlink">
<a href="#" style="cursor:hand" class="orange" title="Click To Go">
<h1 class="orange">ابداء</h1>
<h2 class="orange">منتدى</h2>
<h3 class="black">من جديد</h3>
</a>
</div> <br />
<div class="clickmoon getlink">
<a href="#" style="cursor:hand" class="orange" title="Click To Go">
<h1 class="orange">تعجب</h1>
<h2 class="orange">لا</h2>
<h3 class="black">ازرار جميل</h3>
</a>
</div>
<br />
<div class="clickmoon getlink">
<a href="#" style="cursor:hand" class="orange" title="Click To Go">
<h1 class="orange">اكتب </h1>
<h2 class="orange">اكتب</h2>
<h3 class="black">هنا</h3>
</a>
</div>
</body>
</html>
موضوع: ازرار يمكن استخدامها 
الأحد 29 سبتمبر - 1:34