رفتن به مطلب

درست کردن دکمه ی جدید


پست های پیشنهاد شده

سلام من کد css یه دکمه رو آخر استایل گذاشتم و با html اونو فراخوانی کردم اما دکمه خوب کار نکرد

کد CSS:


body {
background: #ddd;
width: 100%;
margin-top: 70px;
}
button {
width:165px;
height:35px;
display:block;
font-family:Arial, "Helvetica", sans-serif;
font-size:16px;
font-weight:bold;
color:#fff;
text-decoration:none;
text-transform:uppercase;
text-align:center;
text-shadow:1px 1px 0px #07526e;
padding-top:6px;
margin-left:auto;
margin-right:auto;
left:30px;
position:relative;
cursor:pointer;
border: none;
border-left:solid 1px #2ab7ec;
background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;
}
button:active {
top:3px;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}
button:after {
content:"2";
width:35px;
height:25px;
display:block;
position:absolute;
padding-top:10px;
top:0px;
margin-left:-37px;
font-size:16px;
font-weight:bold;
color:#8fd1ea;
text-shadow:1px 1px 0px #07526e;
border-right:solid 1px #07526e;
background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
button:active:AFTER {
top:-3px;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

کد HTML:


<button>متن</button>

اگه ممکنه راهنمایی کنید

با تشکر

ویرایش شده توسط Ali WP
لینک به ارسال
سلام من کد css یه دکمه رو آخر استایل گذاشتم و با html اونو فراخوانی کردم اما دکمه خوب کار نکرد

کد CSS:

 body { background: #ddd; width: 100%; margin-top: 70px; } button { width:165px; height:35px; display:block; font-family:Arial, "Helvetica", sans-serif; font-size:16px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase; text-align:center; text-shadow:1px 1px 0px #07526e; padding-top:6px; margin-left:auto; margin-right:auto; left:30px; position:relative; cursor:pointer; border: none; border-left:solid 1px #2ab7ec; background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999; } button:active { top:3px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999; } button:after { content:"2"; width:35px; height:25px; display:block; position:absolute; padding-top:10px; top:0px; margin-left:-37px; font-size:16px; font-weight:bold; color:#8fd1ea; text-shadow:1px 1px 0px #07526e; border-right:solid 1px #07526e; background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ; button:active:AFTER { top:-3px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ; } 

کد HTML:

متن

اگه ممکنه راهنمایی کنید با تشکر

سلام ، لطفاً اطلّاعات بیشتر بدید ، دقیقاً قراره چه شکلی باشه که نیست؟

لینک به ارسال
دکمه باید اینطوری باشه: N.jpg ولی اینطوری نمایش داده میشه: B.jpg کد هم مشکلی نداره کد html:متن

بله دکمه برای منم درست نمایش داده میشه ، 3 تا احتمال میشه داد:

1: یکی از خط های فایل style.css دارای مشکل هست و به همین دلیل ادامه اون کد ها کار نمیکنه (کد رو ببرین بالا تر ببینید کار میکنه یا نه)

2: شما بعد از اعمال تغییرات F5 نمیزنید

3: این کلاس ها با کلاس دیگه ای در تداخل هستند ، inspect element کنید و همچنین به پایان استایل هاتون !important اضافه کنید.

اگر حل نشد آدرس آنلاین بذارید لطفاً.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...