(CSS)كود جعل الازرار في منتداك مثل اليوتيوب

اليوم اتيت لكم بكود رائع لجعل ازرار منتداك مثل اليوتيوب وبتأثيرات اكثر احترافية !

يلا لن اطول عليكم صور الكود :
-------
قبل مرور الماوس


https://i.servimg.com/u/f75/17/99/57/94/oouu_o17.png

--------------------
بعد مرور الماوس


https://i.servimg.com/u/f75/17/99/57/94/oouu_o18.png

------------------------------------------------

والأن لا اطول عليكم الكود

الرمز:

/* code programed by AsHeK IbDa3 */ input{ border: 1px solid #DDD; border-radius: 3px; text-shadow: 0 1px 1px white; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 0 1px 1px #fff; font: bold 11px Sans-Serif; padding: 6px 10px; white-space: nowrap; vertical-align: middle; color: #666; background: transparent; cursor: pointer; } input:hover, input:focus,input[type="submit"]:hover { border-color: #999; background: -webkit-linear-gradient(top, white, #E0E0E0); background: -moz-linear-gradient(top, white, #E0E0E0); background: -ms-linear-gradient(top, white, #E0E0E0); background: -o-linear-gradient(top, white, #E0E0E0); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff; } input[type="submit"],input:active { border: 1px solid #AAA; border-bottom-color: #CCC; border-top-color: #999; -webkit-box-shadow: inset 0 1px 2px #aaa; -moz-box-shadow: inset 0 1px 2px #aaa; box-shadow: inset 0 1px 2px #aaa; background: -webkit-linear-gradient(top, #E6E6E6, gainsboro); background: -moz-linear-gradient(top, #E6E6E6, gainsboro); background: -ms-linear-gradient(top, #E6E6E6, gainsboro); background: -o-linear-gradient(top, #E6E6E6, gainsboro); } /* code programed by AsHeK IbDa3 */

ملاحظة : يجب قبل وضع الكود التأكد ان ليس عندك اي اكواد ازرار اخرى في ورقة السي اس اس

كم هو رائع موضوعكِ
دوما اختياراتكِ مميزة
سلم لنا ذوقكِ الرفيع
كل الشكر والتقدير