رفتن به مطلب

{درخواست آموزش} ایجاد دکمه متغییر


sun.night902

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

سلام خدمت عزیزان انجمن

 

میخواستم اگر امکانش هست استایل و کد یک دکمه بهم بدید

دکمه مورد نظر من میخوام متغییر باشه یعنی زمانی که موس میره روش تغییر بکنه

( البته من میخوام از تصویر استفاده بکنم که حالا اینش بحثی نیست )

 

ممنون میشم عزیزان راهنمایی بکنن و استایل و کد html و css مناسبی در اختیارم قرار بدن

 

 

راستی ماجرای انجمن چیه چرا اینجوری شده ؟!!!

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

سلام

این دکمه تصویری هست و وقتی مکان نمای موس رو می بری روش زیرش یک خط ظاهر می شود

کد css

 

.g:hover {     border-bottom: outset; }

 

 

کد css رو در یک فایل با پسوند css. ذخیره کن و در صفحه مورد نظر در تگ head به اون فایل لینک بده

و این هم کد html

 

<a href="https://1go.ir/" target="_blank" title=""><input class="g" type="image" src=""/></a>

 

 

جلوی href لینک دکمه رو بنویس

جلوی title توضیحات در باره لینک رو بنویس

جلوی src لینک تصویر رو قرار بده

 

شرمنده دیر شد سرم خیلی شلوغه

 

با تشکر

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

  • مدیر انجمن

درود .

 

چیزی که مد نظر شماست ، خاصیت Hover هست . در اینترنت و گوگل جستجو کنید مقالات و آموزش های زیادی هستند اما من به صورت مفید و مختصر براتون توضیح می دم .

 

هر Class از استایل یک قالب یا اسکریپت ، در صورتی که عنصر ثابتی نباشد توانایی پذیرفتن Hover را دارد . برای استفاده از Hover شما باید یک کلس از قسمت مورد نظر را کپی کنید و نام کلس را با هاور ادغام کنید . حالا اگر هم نفهمیده باشید کد کلید زیر رو دقت کنید متوجه می شید منظورم از ساخت یک کلس همنام با ادغام هاور یعنی چی :

 

کد HTML کلید ما :

 

<div class="button-container"> <div class='button --dark center'>Dark / blue</div> <div class='button --green center'>Green / Dark</div> <div class='button --blue center'>Blue Dark</div>

 

 

استایل مورد نیاز برای حالت گرفتن و هاور کلید :

 

 

.button-container { display: flex; justify-content: space-between; margin: 60px auto;}.button { border: 0 none; border-radius: 36px; color: #fff; cursor: pointer; display: inline-block; font-size: 14px; padding: 12px 45px; text-transform: none; transition: all 100ms ease-in-out; width: auto; /* auto */ text-align: center; /* DELETE WHEN WIDTH AUTO */ &:hover { opacity: .7; } &.--dark { background: $dark; color: $white; } &.--green { background: $green; color: $white; } &.--blue { background: $blue; color: $white; }}

 

 

در استایل بالا ، از خاصیت کلی استفاده شده . یعنی برای تمامی کلید های زیرمجموعه ی این استایل ، تنها هاور اعمال شونده Opacity با عدد 7 است . اما در صورتی که بخواهید هر بخش را متمایز هاور کنید باید به صورت زیر عمل کنید :

 

فرض کنید کلس یک بخش باشد :

 

 

.myclass {color: black;}

 

حال برای هاور دار کردن این قسمت باید یک کلس دیگه پایین همین کلس ایجاد کنید و افکت ها و استایل های مورد نظرتون رو ویرایش کنید تا در صورتی که موس روی قسمت مورد نظر رفت ، افکت های جدید برای کاربر ظاهر بشن .

 

 

.myclass:Hover {color: Green;}

 

 

در کد مثالی که دادم رنگ معمولی بخش ما مشکی هست که با رفتن موس روی اون قسمت به رنگ سبز تبدیل میشه .

 

این فقط یک مثال ساده بود که بفهمید چطوری باید این کار رو انجام بدید .

 

این مثال کوتاهی هم که زدم مربوط میشه به هاور دادن به یک بخش مجزا از بخش های دیگه . اما در کد دکمه ای که دادم ، هاور نیازی به کدهای قبلی کلس اصلی نداره . اما اگه مجزا بخواهید انجام بدید حتما باید کدهای کلس اصلی هم در Hover قرار داده بشه .

 

البته خاصیت های After و Before هم هستند که می تونید دربارشون توی سایت ها مطالعه کنید .

 

در صورت داشتن هرگونه سوال در ادامه مطرح کنید . موفق باشید .

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...