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

كل ما يهم مطور المواقع ... لغات برمجة المواقع .. سكربتات .. مناقشات ..
مغلق
DesignersColony
عضو جديد
مشاركات: 19
اشترك في: 22 مايو 2005, 17:45
اتصال:

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

مشاركة بواسطة DesignersColony »

السلام عليكم


دى طريقة عمل أزرار بال 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> 

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


تحياتى
عبقر
عضو مفيد جداً
مشاركات: 417
اشترك في: 25 سبتمبر 2004, 03:28
مكان: MyPC

مشاركة بواسطة عبقر »

شكراً جزيلاً

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

http://www.seo-browser.com/index.php?ad ... ple=Simple
WEBPro
عضو نشيط
مشاركات: 190
اشترك في: 14 ديسمبر 2004, 14:45
مكان: WwW

مشاركة بواسطة WEBPro »

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

الستايل شيت هذي بحر كبير وجميل :lol: ارجوك كثر لنا من هذه الحركات :)
spy
عضو نشيط
مشاركات: 159
اشترك في: 22 سبتمبر 2004, 03:08
مكان: مصر ام الدنيا
اتصال:

مشاركة بواسطة spy »

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

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

ارجوا الافاده ومشكورين مقدما
WebMaster
عضو نشيط
مشاركات: 287
اشترك في: 01 فبراير 2005, 08:59

مشاركة بواسطة WebMaster »

شكراً لك اخي
يوجد مثال جميل جدا ونفسي اعرف طريقته هل هي 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 ممكن يفتينا :)
DesignersColony
عضو جديد
مشاركات: 19
اشترك في: 22 مايو 2005, 17:45
اتصال:

مشاركة بواسطة 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"> </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">
         </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">
         </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">
         </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">
         </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
jax113
عضو جديد
مشاركات: 13
اشترك في: 04 يونيو 2005, 16:46
مكان: hhh

مشاركة بواسطة jax113 »

جميل جدا
مغلق