Ali WP

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

5 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام من کد 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
0

به اشتراک گذاری این پست


لینک به پست
سلام من کد 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:

متن

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

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

1

به اشتراک گذاری این پست


لینک به پست

دکمه باید اینطوری باشه:

N.jpg

ولی اینطوری نمایش داده میشه:

B.jpg

کد هم مشکلی نداره

کد html:

<button>متن</button>

0

به اشتراک گذاری این پست


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

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

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

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

مشکل حل شد

توی پسوند فایل فراخوانی مشکل بود درستش کردم

ممنون

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری