صممت CSS3 لتجعل حياة مصممي المواقع ومطوري البرامج أسهل. في حين انها ليست شيئا يمكننا الاعتماد دائما علىه بهدف التخطيط فقط ، ولن يمكننا استخدامها لتعزيز جوانب معينة من التصاميم كإنفاق مبلغ أقل في التصميم ووقت أسرع.

لمشاهدة المثال قم بالنقر هنا

[html] img {
border: 15px solid #fff;
border-bottom: 65px solid #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}

img:hover {
-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
-webkit-transform: rotate(1deg) scale(1.05);
-moz-transform: rotate(1deg) scale(1.05);
}
[/html]

الظل يعطي الانطباع بأن يجلس على سطح مستو، والتحجيم، وزيادة حجم وموضع الظل على دولة تحوم يمكننا خلق الوهم الذي تم رفعه قليلا عن سطح الأرض.
لمشاهدة الأزرار قم بالنقر هنا

لماذا الأزرار موجودة في تصميم المواقع الإلكترونية؟ 
فالأزرار هي وسيله تفاعليه وشكل من أشكال التفاعل، فهي سهلة الفهم ، وهي ماديه وحقيقية و نستخدمها كل يوم على أشياء مثل أجهزة الكمبيوتر، ومشغلات MP3، وأجهزة التلفزيون وغيرها من الأجهزة الالكترونية أي نستخدمها بشكل يومي .

باستخدام CSS3 نقوم بتعيين العرض والارتفاع وتحديد الحدود ودائرة نصف قطرها نصف تلك القيم.

[html] button.two {
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-indent: -9999px;
border: 1px solid #696969;
background: #696969 url(power.png) no-repeat 6px 5px;
}
[/html]

نقوم بعمل تدرج لإنشاء الانحدار الذي يذهب من الظلام الي لونا أفتح في الجزء السفلي، يتم تطبيق تحويل CSS، والتوسع في الضغط على زر قليلا. للحفاظ على صورة الخلفية من زر الطاقة وإدراجه في خاصية أساسية وقيم منفصلة مع التدرج .

[html] button.two:active {
-webkit-transform: scale(0.97);
-moz-transform: scale(0.97);
background: url(power.png) no-repeat 6px 5px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #696969),
color-stop(0.72, #2a2a2a)
);
background: url(power.png) no-repeat 6px 5px, -moz-linear-gradient(
center bottom,
#696969 13%,
#2a2a2a 62%
);
}
[/html]

نستخدم CSS3 للحصول على التدرج والتأثير الكامل. يتم تطبيق الحدود علي الـ DIV التي تحتوي على الزر.

[html] .border {
margin: 0 auto;
height: 42px;
width: 42px;
display: block;
background-color: #fcfcfc;
-webkit-border-radius: 21px;
-moz-border-radius: 21px;
border-radius: 21px;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.13, #fcfcfc),
color-stop(0.72, #c0c0c0)
);
background: -moz-linear-gradient(
center bottom,
#fcfcfc 13%,
#c0c0c0 62%
);
-webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
}
[/html]