كيف أصمّم زر باستخدام css؟

نعم بإمكانك تصميم الأزار والشاشات وكل عناصر التحكم والعرض فى الصفحات بإستخدام CSS

أنصحك بقراءه المزيد عن الـ CSS وهو محتوى متوفر بكثره علي الإنترنت

ومتوفر هنا أيضاً علي أكاديميه حسوب http://academy.hsoub.com/code/css/

ولتصميم الأزار كمثال يمكننا تطبيقه كالتالي (للتوضيح)

فلنفترض أن لدينا زر " تسجيل الدخول" بهذا التكويد 

<input type="submit" class="niceStyle" name="submit" value="تسجيل الدخول" id="submit" />

ونريد تطبيق التكويد عليه لإعطائه شكل معين 

.niceStyle
{
-- خاص بتعديل لون الزر الخلفى
    background-color: #E90;
 -- خاص بإستداره الحواف
    border-radius:6px;
-- لون الكتابه داخل الزر 
    color: White;
-- حجم الخط
    font-size: 20px;
-- حجم ولون ونوع الحواف
    border:solid 1px green;
}


-- خاص بالتأثير الخاص بوقوف الفأره علي الزر
.niceStyle : hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

ويوجد الكثير من الدورس علي الإنترنت خاصه بكيفيه تحويل تصميم الفوتوشوب إلى تصميمات CSS خاصه بالويب

كفيت ووفيت أخي الغالي

ملاحظة بسيطة إذا سمحت بخصوص السطر الآتي:

.niceStyle : hover {

يلزم لصق الكلمتين بالنقطتين الرأسيتين لكي يعمل بشكل سليم كالآتي:

.niceStyle:hover {