دیجیتایزر

ساختار HTML دکمه

ابتدا ساختار HTML را تعریف می‌کنیم. در این کد، تنها یک دکمه ساده با کلاس `.Btn` وجود دارد:

html

<button class="Btn">دکمه ژله‌ای</button>

توضیح HTML

- "button" المان دکمه در HTML است که برای ایجاد یک دکمه تعاملی استفاده می‌شود.

- `class="Btn"`: به دکمه یک کلاس به نام `Btn` داده‌ایم که در CSS از آن برای استایل‌دهی استفاده خواهیم کرد.

استایل‌دهی با CSS

حالا به سراغ استایل‌دهی دکمه با CSS می‌رویم. در ادامه به صورت گام به گام تمام ویژگی‌های استفاده شده را بررسی می‌کنیم.

استایل پایه دکمه

css

.Btn { position: relative; width: 150px; height: 55px; border-radius: 45px; border: none; background-color: rgb(151, 95, 255); color: white; box-shadow: 0px 10px 10px rgb(210, 187, 253) inset, 0px 5px 10px rgba(5, 5, 5, 0.212), 0px -10px 10px rgb(124, 54, 255) inset; cursor: pointer; display: flex; align-items: center; justify-content: center; }

توضیح CSS

1. `position: relative;`: این ویژگی برای استفاده از pseudo-elements (`::before` و `::after`) لازم است. با این کار، می‌توانیم المان‌های اضافی را نسبت به دکمه جایگذاری کنیم.
2. `width` و `height`: اندازه دکمه را تنظیم می‌کند.
3. `border-radius: 45px;`: گوشه‌های دکمه را گرد می‌کند تا ظاهری نرم‌تر و شبیه به ژله داشته باشد.
4. `background-color`: رنگ پس‌زمینه دکمه را تعیین می‌کند.
5. `color: white;`: رنگ متن داخل دکمه را سفید می‌کند.
6. `box-shadow`:

- اولین سایه با مقدار `inset` سایه داخلی روشن ایجاد می‌کند.

- دومین سایه سایه خارجی تیره است که حجم و عمق به دکمه می‌دهد.

- سومین سایه نیز سایه داخلی تیره‌ای است که عمق بیشتری به دکمه می‌بخشد.

7. `cursor: pointer;`: نشانگر ماوس به حالت اشاره‌گر تغییر می‌کند تا کاربر بداند که دکمه قابل کلیک است.
8. `display: flex;`, `align-items` و `justify-content`: متن را در مرکز دکمه قرار می‌دهد.

استفاده از Pseudo-elements (`::before` و `::after`)

css

.Btn::before { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.678); content: ""; filter: blur(1px); top: 7px; border-radius: 50%; } .Btn::after { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.137); content: ""; filter: blur(1px); bottom: 7px; border-radius: 50%; }

توضیح `::before` و `::after`

- `::before` و `::after`: این عناصر مجازی به دکمه اضافه می‌شوند و خطوط نازکی را در بالا و پایین دکمه ایجاد می‌کنند.

- `position: absolute;`: جایگذاری دقیق خطوط را امکان‌پذیر می‌کند.

- `background-color`: رنگ خطوط را مشخص می‌کند.

- `filter: blur(1px);`: افکت محو شدگی ایجاد می‌کند تا خطوط جلوه نرمی داشته باشند.

- `border-radius: 50%;`: گوشه‌های خطوط را گرد می‌کند.

ایجاد افکت ژله‌ای با انیمیشن

css

.Btn:hover { animation: jello-horizontal 0.9s both; } @keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } }

توضیح انیمیشن

- `@keyframes`: انیمیشنی به نام `jello-horizontal` ایجاد می‌کند که شامل تغییرات مختلف در مقیاس دکمه است.

- `transform: scale3d`: اندازه دکمه را در محورهای X و Y تغییر می‌دهد تا افکت ژله‌ای شبیه به تکان خوردن ایجاد شود.

- `hover`: انیمیشن تنها زمانی اجرا می‌شود که کاربر ماوس را روی دکمه قرار دهد.

توضیح فریم‌ها

- `0%` و `100%`: اندازه دکمه به حالت عادی است.

- `30%`: دکمه در محور X کشیده و در محور Y فشرده می‌شود.

- `40%`: دکمه در محور X فشرده و در محور Y کشیده می‌شود.

- `50%` و فریم‌های بعدی: تغییرات مقیاس به آرامی کاهش می‌یابد تا دکمه به حالت عادی بازگردد.

نتیجه‌گیری آموزش ساخت دکمه ژله‌ای با CSS و HTML

این دکمه ژله‌ای یک افکت بصری جذاب و منحصر به فرد دارد که به رابط کاربری وب‌سایت حس تعاملی بیشتری می‌بخشد. با استفاده از ترکیبی از `box-shadow`، `border-radius` و انیمیشن، دکمه‌ای ساختیم که هم زیبا و هم کاربرپسند است. این نوع دکمه‌ها به خصوص در وب‌سایت‌های مدرن و خلاقانه که نیاز به جذابیت بصری بیشتری دارند، کاربرد زیادی دارند.

نکات مهم

- همیشه سعی کنید انیمیشن‌ها را به گونه‌ای طراحی کنید که کاربران را اذیت نکند. انیمیشن‌های بسیار سریع یا زیاد می‌توانند تجربه کاربری را کاهش دهند.

- این دکمه می‌تواند به سادگی سفارشی‌سازی شود. شما می‌توانید رنگ‌ها، اندازه‌ها و حتی انیمیشن را تغییر دهید تا با استایل وب‌سایت شما همخوانی داشته باشد.

کد کامل

html

<button class="Btn">دکمه ژله‌ای</button> <style> .Btn { position: relative; width: 150px; height: 55px; border-radius: 45px; border: none; background-color: rgb(151, 95, 255); color: white; box-shadow: 0px 10px 10px rgb(210, 187, 253) inset, 0px 5px 10px rgba(5, 5, 5, 0.212), 0px -10px 10px rgb(124, 54, 255) inset; cursor: pointer; display: flex; align-items: center; justify-content: center; } .Btn::before { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250, 0.678); content: ""; filter: blur(1px); top: 7px; border-radius: 50%; } .Btn::after { width: 70%; height: 2px; position: absolute; background-color: rgba(250, 250, 250 , 0.137); content: ""; filter: blur(1px); bottom: 7px; border-radius: 50%; } .Btn:hover { animation: jello-horizontal 0.9s both; } @keyframes jello-horizontal { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } </style>

این کد کامل دکمه ژله‌ای را برای استفاده در پروژه‌های شما فراهم می‌کند. امیدواریم که از این آموزش لذت ببرید و بتوانید از آن در طراحی‌های خود بهره‌مند شوید!