طراحی افکت هاور دکمه (html و Css)
اگر می خواهید صفحه خود را کمی تغییر دهید، طراحی افکت هاور برای دکمه ها در سایت خود با کمی کد CSS ایده آل است. دکمه های متحرک بازدیدکنندگان را تشویق می کند تا ببینند سایت شما چه چیزی را ارائه می دهد و صفحه شما را پویاتر می کند. همچنین باعث افزایش اعتبار برند شما می شود.
این مقاله یک نمونه افکت جذاب دکمه با کدهای CSS را به شما نشان می دهد. که سبک، ساده و قابل استفاده است. حتی با حداقل دانش جاوا اسکریپت و CSS، بهینه سازی این افکت ها دشوار نیست. می‌توانید طرح‌های این چیدمان را آزمایش کنید و ببینید چه چیزی برای شما بهترین نتیجه را در پی دارد.
این افکت هاور واقعا جلوه خیلی زیبایی به دکمه‌های سایت میتونه بده ?
آموزش طراحی افکت هاور دکمه با کدهای html و Css
خروجی پایانی کدهای ما بصورت زیر خواهد بود.
در ابتدا در فایل index.html خود ، با کدهای زیر ساده زیر ۴ لیست ایجاد می کنیم.
<!DOCTYPE html> <html lang="fa" dir="rtl"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Button Hover Effect</title> </head> <body> <nav> <ol> <li><span>خانه</span></li> <li><span>خدمات ما</span></li> <li><span>درباره ما</span></li> <li><span>تماس با ما</span></li> </ol> </nav> </body> </html>
حالا نوبت به استایل دهی جذاب با استفاده از کدهای Css در فایل style.css می رسد.
@font-face {
font-family: iranyekan;
src: url(./fonts/iranyekanwebmedium.woff);
}
@font-face {
font-family: yekanbakh;
src: url(./fonts/YekanBakhMedium.woff);
}
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #e9e8ed;
font-family: yekanbakh;
}
ol {
padding: 0;
list-style-type: none;
}
li {
font-size: 25px;
width: 8em;
height: 2em;
color: #334155;
border-left: 0.08em solid;
position: relative;
margin-top: 0.9em;
cursor: pointer;
}
li::before,
li::after {
content: "";
position: absolute;
width: inherit;
border-left: inherit;
z-index: -1;
}
li::before {
height: 80%;
top: 10%;
left: calc(-0.15em - 0.08em * 2);
filter: brightness(0.8);
}
li::after {
height: 60%;
top: 20%;
left: calc(-0.15em * 2 - 0.08em * 3);
filter: brightness(0.6);
}
li span {
position: relative;
height: 120%;
top: -10%;
box-sizing: border-box;
border: 0.08em solid;
background-color: #e2e8f0;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(calc(-0.15em * 3 - 0.08em * 2));
transition: 0.4s;
border-radius: 5px;
}
li:hover span {
transform: translateX(0.15em);
}
? کدهای این طراحی ? را می توانید از همین لینک دانلود و مشاهده کنید.
امیدواریم این مقاله برای شما مفید قرار گرفته شده باشد. در صورتی که سوالی در رابطه با این موضوع دارید ، از بخش نظرات پایین مطلب با من به اشتراک بگذارید. همچنین مقاله بعدی با عنوان آموزش ساخت دکمه با CSS از روی فتوشاپ را از دست ندهید.
دیدگاه ها