دکمه ها در HTML و CSS – انیمیشن دادن به دکمه ها
مهندس محسن صادق نژاد
این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)
این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)
به احتمال زیاد با button ها آشنایی دارید. دکمه هایی هستند که در صفحات پیاده سازی می شوند. با کلیک بر روی باتن ها می توان فعالیت مدنظر خود را انجام داد. در مقاله دکمه ها در HTML و CSS قصد داریم به بررسی این ویژگی در صفحات وب بپردازیم. همچنین شما می توانید انیمیشن های خاصی را به دکمه های خود اعمال کنید. کاربر با کلیک بر روی دکمه ها یا هاور کردن آنها جلوه های زیبایی را مشاهده خواهد نمود.
نحوه ایجاد Button
برای ایجاد یک دکمه باید از تگ button استفاده کرد. ساختار استفاده از تگ باتن به شکل زیر می باشد.
<button>Default Button</button>
درون تگ button عبارتی نوشته شده است. این عبارت در خروجی بر روی دکمه نوشته شده و به کاربر نمایش داده می شود.
شما می توانید به کمک استایل دهی در CSS دکمه ای متناسب با ظاهر سایت خود ایجاد کنید. در پایین کدهای ایجاد سه دکمه دیگر را مشاهده می کنید. با اعمال کلاس های مختلف و استایل دهی به آنها، دکمه هایی با ظاهر مناسب تری خواهیم داشت.
در ابتدا بخش های html را مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>دکمه ها</h2>
<button>حالت پیش فرض</button>
<a href="#" class="button">دکمه 1</a>
<button class="button">دکمه 2</button>
<input type="button" class="button" value="دکمه 3">
</body>
</html>
در فایل style.css هم استایل های زیر را به کلاس های مختلف اعمال کرده ایم:
body{
direction: rtl;
}
.button {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
با اعمال استایل های بالا به کدهای html خروحی به شکل زیر خواهد بود:
همانطور که مشاهده می کنید خروجی سه دکمه دیگر به یک شکل می باشد. اما با توجه به کدهای نوشته شده برای این دکمه ها، به تفاوت آنها پی خواهید برد. دکمه 1 در اصل یک تگ a می باشد که با کمک استایل های کلاس button به این شکل نمایش داده شده است. دکمه 2 نیز دقیقا همانند دکمه حالت پیشفرض می باشد با این تفاوت که حاوی کلاس button است. یعنی اگر کلاس استایل های button را به دکمه حالت پیشفرض بدهیم خروجی همانند دکمه 2 خواهد بود. دکمه 3 نیز با کمک تگ input نوشته شده است. در قسمت ویژگی های این تگ با عبارت type می توان ویژگی های یک دکمه را برای این تگ تعریف کرد. بیشتر در فرم ها از این کدها استفاده می شود. سپس یک کلاس button هم می دهیم تا از نظر ظاهری هم شبیه دکمه های دیگر بشود.
ساخت دکمه انیمیشن دار در HTML و CSS
برای بهتر شدن ظاهر سایت می توان دکمه های جالب تری را ایجاد کرد. دکمه ها در HTML و CSS را می توان با انیمیشن دادن به آنها زیباتر نمود. همچنین می توان ویژگی هایی را برای آن در نظر گرفت تا در حالت هاور شدن این ویژگی ها نمایان شود.
به کدهای زیر در بخش HTML توجه فرمایید:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <h2>دکمه انیمیشن دار</h2> <button class="button"><span>هاور </span></button> </body> </html>
در فایل style.css استایل های زیر را اعمال می کنیم:
body{
direction: rtl;
}
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
با استفاده از ویژگی after یک دکمه ای ایجاد کرده ایم که با هاور شدن یک حالت انیمیشنی نمایش می دهد. در آموزش های بعدی راجع به after و before بیشتر صحبت خواهیم کرد.
خروجی کار در هنگام هاور شدن به شکل زیر خواهد بود:
فلش های قبل متن با حالت انیمیشنی خاصی در هنگام هاور شدن ظاهر می شوند.
جمع بندی
در این آموزش سعی شد تا بررسی کاملی بر روی دکمه ها و نحوه پیاده سازی آنها داشته باشیم. همچنین استایل هایی به دکمه ها دادیم و حالت های مختلف آن را بررسی نمودیم. در آموزش های بعدی دکمه هایی با جذابیت بیشتر و ویژگی های ظاهری بهتری را ایجاد خواهیم کرد.
مهندس محسن صادق نژاد
دبیر | مهندس نرم افزار دانشگاه شهید رجایی
ممنونم از اموزشتون خیلی خوب بود
عالی
هواهش میکنم.