کد استایل زیبا برای دکمه های وب (button and input)

در این پست که توسط کاربر  mohamad_77 شده است شما استایلی را می بینید که دکمه های وب شما را از حالت ساده در می آورد و به رنگ نارنجی زیبا تبدیل می کند.

برای دیدن دمو اینجا کلیک کنید.

این کد را درون head صفحه خود قرار دهید:

<style> /* moisrex.rozblog.com */ button,input[type=button],input[type=submit]{ border:1px solid #ffad41; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; font:bold 12px tahoma, arial, helvetica, sans-serif; padding: 7px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); -o-text-shadow: -1px -1px 0 rgba(0,0,0,0.3); -webkit-text-shadow: -1px -1px 0 rgba(0,0,0,0.3); -khtml-text-shadow: -1px -1px 0 rgba(0,0,0,0.3); -moz-text-shadow: -1px -1px 0 rgba(0,0,0,0.3); text-align: center; color: #FFF; background-color: #ffc579; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffc579), to(#fb9d23)); background-image: -webkit-linear-gradient(top, #ffc579, #fb9d23); background-image: -moz-linear-gradient(top, #ffc579, #fb9d23); background-image: -ms-linear-gradient(top, #ffc579, #fb9d23); background-image: -o-linear-gradient(top, #ffc579, #fb9d23); background-image: linear-gradient(to bottom, #ffc579, #fb9d23); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc579, endColorstr=#fb9d23); cursor:pointer; margin:3px; } button:hover,input[type=button]:hover,input[type=submit]:hover{ text-shadow: -1px -1px 0 rgba(0,0,0,0.5); -o-text-shadow: -1px -1px 0 rgba(0,0,0,0.5); -webkit-text-shadow: -1px -1px 0 rgba(0,0,0,0.5); -khtml-text-shadow: -1px -1px 0 rgba(0,0,0,0.5); -moz-text-shadow: -1px -1px 0 rgba(0,0,0,0.5); border:1px solid #ff9913; background-color: #ffaf46; background-image: -webkit-gradient(linear, left top, left bottom, from(#ffaf46), top(#e78404)); background-image: -webkit-linear-gradient(top, #ffaf46, #e78404); background-image: -moz-linear-gradient(top, #ffaf46, #e78404); background-image: -ms-linear-gradient(top, #ffaf46, #e78404); background-image: -o-linear-gradient(top, #ffaf46, #e78404); background-image: linear-gradient(to bottom, #ffaf46, #e78404); filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffaf46, endColorstr=#e78404); } </style>