أزرار CSS خالصة مميزة و بخاصية ال rollover !

السلام عليكم

دى طريقة عمل أزرار بال CSS الخالص، بدون جافاسكريبت ولا جرافيكس

لمشاهدة مثال:
http://www.designertoday.com/images/HOW ... llover.htm

الكود الذى نضعه فى ال head :

كود: تحديد الكل

<style type="text/css"> 
<!-- 
a.button { 
 font-weight: bold; 
 font-size: 9px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 padding: 4px 8px; 
 border-top: 1px solid white; 
 border-right: 1px solid black; 
 border-bottom: 1px solid black; 
 border-left: 1px solid white; 
 text-align: center; 
 min-width: 75px; 
 text-transform: uppercase; 
} 
a.button:link { 
 background-color: #800; 
 color: #FFF; 
 text-decoration: none; 
 } 
a.button:visited { 
 background-color: #800; 
 color: #FFF; 
 text-decoration: none; 
 } 
a.button:hover { 
 background-color: #800; 
 color: yellow; 
 border-color: black white white black; 
 text-decoration: none; 
 } 
a.button:active { 
 background-color: #369; 
 color: #ccc; 
 text-decoration: none; 
 } 
--> 
</style>

الكود الذى نضعه فى ال BODY لتحويل أى لينك عادى لزرار CSS:

كود: تحديد الكل

<a href="http://URL" class=button> أكتب هنا الكلمة التى ستظهر على الزرار </a>

يتميز بالسرعة و الأناقة و السهولة!
جربوه و قولولى رأيكم :)

تحياتى

شكراً جزيلاً

جربتها ونفعت وفعلاً افضل من الجافا سكربت ولاتؤثر على الSEO ابداً :)

http://www.seo-browser.com/index.php?ad ... ple=Simple

الف شكر ياباشا

الستايل شيت هذي بحر كبير وجميل :lol: ارجوك كثر لنا من هذه الحركات :)

بصراحة اعشق شيء اسمه CSS
امكانيات خياليه مع سهوله مطلقة ان شاء الله قريبا بتعلمها من الصفر :D

من مدة وانا ابحث عن برامج لعمل ازرار CSS جميله مثل الموجوده في هذا الموضوع
فهل اجد عندكم المزيد ؟؟؟
يوجد مثال جميل جدا ونفسي اعرف طريقته هل هي CSS ام DHTML
http://pxll.com/

ارجوا الافاده ومشكورين مقدما

شكراً لك اخي

يوجد مثال جميل جدا ونفسي اعرف طريقته هل هي CSS ام DHTML
http://pxll.com/

فيها css وفيها جافا سكربت

شوف واحده كمثال

كود: تحديد الكل

<td bgcolor="#ffffff" class="td_1" onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" bordercolor="#D5D5D5" width="18%" align="center" height="20" style="border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-style: dotted; border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/vb"><span style="text-decoration: none">المنتديات</span></a></span></font></td>

ركز هنا

كود: تحديد الكل

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" bordercolor="#D5D5D5" width="18%" align="center" height="20" style="border-left-width: 1px; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; border-bottom-style: dotted; border-bottom-width: 1px"

والاخ DesignersColony ممكن يفتينا :)

أسعدنى تجاوبكم فعلا و الحمد لله انه عجبكم :)
شكرا على الردود، و إن شا الله إذا وجدت أكواد CSS أخرى حلوة حأعرضها لكم

أخى Spy
أظن الأخ web master عنده حق و آدى الكود:

كود: تحديد الكل


<div align="center">
  <center>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 

collapse; font-size:9pt; font-family:Tahoma" bordercolor="#111111" 

id="AutoNumber1">
  <tr>
    <td width="700" align="center" bgcolor="#FFFFFF" colspan="2" height="14">
    <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 

collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="100">
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#d5d5d5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p style="margin-top: 0; margin-bottom: 0" align="center">
        <font face="Tahoma" style="font-size: 9pt"><span lang="ar-sa">
      <a href="index.html">
      <span style="text-decoration: none">الصفحة 
      الرئيسية</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
        &nbsp;</td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/vb"><span 

style="text-decoration: none">المنتديات</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
        &nbsp;</td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="droos.html">
      <span style="text-decoration: none">الدروس 

التعليمية</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1"  bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
        &nbsp;</td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="http://pxll.com/tasamem/">
        <span style="text-decoration: none">قسم 

التصاميم</span></a></span></font></td>
        <td bgcolor="#F5F5F5" class="td_1" bordercolor="#D5D5D5" width="2%" 

align="center" height="60" style="border-left-width: 1px; border-right-width: 

1px" rowspan="3">
        &nbsp;</td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="20%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-top-style: 

dotted; border-top-width: 1px; border-bottom-style: dotted; 

border-bottom-width: 1px">
        <p align="center"><font face="Tahoma" style="font-size: 9pt">
        <span lang="ar-sa"><a href="mailto:team@pxll.com">
      <span style="text-decoration: 

none">راسلنا</span></a></span></font></td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
      <a href="daleel/"><span style="text-decoration: none">دليل 
      المواقع</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
      <a href="color/"><span style="text-decoration: none">صندوق 
        الألوان</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
      <a href="serv/"><span style="text-decoration: 

none">خدماتنا</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
      <a href="js/"><span style="text-decoration: none">مكتبة 
        الصوتيات</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="20%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <a href="khatat/maktotat.html"><span style="font-size: 9pt; 

text-decoration: none">مكتبة 
        الخطاط</span></a></td>
      </tr>
      <tr>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span style="font-size: 9pt"><a href="http://www.pxll.com/pxllicon">
        <span style="text-decoration: none">مكتبة الأيقونات</span></a></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span lang="ar-sa"><font face="Tahoma" style="font-size: 9pt">
        <a href="team/index.html"><span style="text-decoration: none">صفحة 
        الفريق</span></a></font></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <font face="Tahoma" style="font-size: 9pt"><a href="java/">
      <span style="text-decoration: none">مكتبة 

الجافا</span></a></font></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff';" 

bordercolor="#D5D5D5" width="18%" align="center" height="20" 

style="border-left-width: 1px; border-right-width: 1px; border-bottom-style: 

dotted; border-bottom-width: 1px">
        <span style="font-size: 9pt"><a href="adwat/index.html">
        <span style="text-decoration: none">مكتبة الأدوات</span></a></span></td>
        <td bgcolor="#ffffff" class="td_1" 

onmouseover="this.bgColor='#f6f6f6';" onmouseout="this.bgColor='#Ffffff'; " 

bordercolor="#D5D5D5" width="18%" align="center" height="20"; 

style="border-left-width: 1px; align=center height=20; border-right-width: 

1px; border-bottom-style: dotted; border-bottom-width: 1px">
        <font face="Tahoma" style="font-size: 9pt"><a 

href="majalah/index.html">
        <span style="text-decoration: none">مجلة الموقع</span></a></font></td>
      </tr>
</table>



</div>

اتمنى يكون هو ده اللى انت محتاجه

تحياتى لكم جميعا :D

جميل جدا