ساخت دکمه جذاب در المنتور، دکمه ها توی هر سایتی ازکاربرد ویژهای بر خوردارن. به دلیل اینکه دکمه ها در واقع کلید تعامل با بخش های مختلف سایت هستند، بسیار در تجربه کاربری کاربر و همچنین زیبایی طراحی سایتمون تاثیر گذار هستند. بنابراین با ساخت دکمه جذاب در المنتور، می تونیم کاری کنیم که کاربرها علاوه بر اینکه با دیدن سایت ما، به خلاقیت و طراحی حرف ای ما پی میبره، انگیزه بیشتری برای کار با سایت ما داشته باشن و مدت زمان بیشتری در صفحات سایت حضور داشته باشن. همچنین با ساخت دکمه جذاب در المنتور،احتمال کلیک بر روی لینک های صفحه بیشتر میشه چون معمولا دکمه ها ما رو به صفحات دیگه ای از سایتمون میبرن.
در مقاله ساخت دکمه جذاب در المنتور از سایت کنترل وب، قصد داریم به کمک صفحه ساز المنتور در سیستم مدیریت محتوای وردپرس،نحوه طراحی دکمه ی جذاب رو یاد بگیریم تا بتونیم با ساخت دکمه جذاب در المنتور، طراحی زیباتری رو برای صفحات سایتمون به وجود بیاریم.پس بزنین بریم آموزشو شروع کنیم!
توی قدم اول در ساخت دکمه جذاب در المنتور،باید یک بخش(سکشن) ایجاد کنیم تا بتونیم المان دکمه رو توی یکی از ستون های این بخش قرار بدیم.
بعد از اینکه بخش موردنظر رو ایجاد کردیم، توی قسمت ویرایش بخش، میتونیم ارتفاع بخش موردنظر رو تنظیم کنیم. ما روی هم اندازه صفحه نمایش گذاشتیم اما شما می تونین با استفاده از قسمت کمترین ارتفاع مقدار دلخواهتونو تنظیم کنین.
برای ایکه دکمه ای که قراره طراحی کنیم، از حالت شفاف برخورداره، باید برای اینکه این ویژگی به نظر بیاد، رنگ پس زمینه ای برای بخشمون در نظر بگیریم. برای اینکار توی ویرایش بخش قسمت استایل نوع پس زمینه رو روی نمایش کلاسیک قرار می دیم و رنگی رو از قسمت رنگ برای اون تنظیم میکنیم.
بعد از درست کردن بخش، باید المان دکمه رو از المان های المنتور، انتخاب کنیم و توی ستون دلخواه بخش موردنظر بزاریم. اگرم پیداش نکردین می تونین از قسمت بالای نوار “دکمه” رو سرچ کنین.
در ادامه کار، باید تنظیماتی که در ادامه می گیم رو برای دکم موردنظر اعمال کنیم. برای اینکار توی قسمت ویرایش دکمه، در قسمت محتوا، چیدمان رو روی تراز تنظیم می کنیم تا دکمه به اندازه ستونی که توی اون قرار گرفته بشه.
از قسمت استایل، رنگی رو برای رنگ متن دکمه از قسمت رنگ متن در نظر می گیریم.
همچنین مثل قسمت رنگ متن، رنگی رو برای خود دکمه در نظر میگیریم. برای اینکه این دکمه حالت شفاف و داشته باشه، با استفاد قسمتی که توی تنظیم رنگ هست مقدار Transparency اونو کم می کنیم. درست مثل تصویر زیر:
در ویرایش دکمه،از قسمت استایل، مقدار نوع کادر رو روی یکپارچه میزاریم و با تنظیم اندازه عرض در کادر پایین اون؛ عرضی رو مشخص می کنیم تا بتونیم حاشیه ای رو برای دکممون تعیین کنیم.
این کار باعث میشه کادر دکمه به شکل زیر در بیاد.
بعد از این، توی قسمت انحنای مرز، مقداری رو برای گرد شدن حاشیه دکمه در نظر می گیریم تا حالت گردی رو حاشیه دکمه پیدا کنه.
هم چنین برای دکمه فاصله داخلی 15px رو در کادر فاصله داخلی تنظیم می کنیم.
حالا توی قدم اخر برای اینکه حالت روشنی شدن و قسمت پشتی دکمه که انیمیشن روشنایی رو برای ما به وجود میاره رو ایجاد کینم، نیاز داریم که از قسمت ویرایش دکمه، قسمت پیشرفته، قسمت سی اس اس سفارشی، کدی در ادمه قرار میدیم رو بزارین.
حالا اگر روی دکمتون موس رو نگه دارین( هاور کنین)، می بینین که دکمه کارایی خودشو به دست آورده و کار ساخت دکمه جذاب در المنتور تمومه!
توی قطعه کد زیر قسمتی به نام lightColor وجود داره که میتونین با تغییر کد رنگی اون به رنگ دلخواهتون، رنگ قسمت رنگی دکمه رو که ایجاد کننده انیمیشن روشناییه تغییر بدین.
امیدوارم که این آموزش براتون مفید بوده باشه D:
قطعه کد:
:root {
--lightColor: #ff1f71;
}
selector a{
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
transition: 0.5s;
z-index: 1;
backdrop-filter: blur(5px);
}
selector a:hover{
font-size:100%;
cursor: pointer;
}
selector::before{
position: absolute;
content: '';
top:-30%;
left:50%;
width:20px ;
height:75px;
border-radius: 30px;
background: var(--lightColor);
transform :translateX(-50%);
transition: 0.5s;
}
selector:hover::before{
top: 0px;
left:50%;
width:100%;
height:100%;
background: var(--lightColor);
box-shadow: 0 0 5px var(--lightColor),0 0 15px var(--lightColor),0 0 30px var(--lightColor),0 0 60px var(--lightColor);
border-radius: 30px;
transition-delay:0.5s;
}
