دکمه ها در HTML و CSS – انیمیشن دادن به دکمه ها

48

0

تصویر شاخص پست آموزشی دکمه ها...

این پست بخشی از مسیر متخصص CSS است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

به احتمال زیاد با button ها آشنایی دارید. دکمه هایی هستند که در صفحات پیاده سازی می شوند. با کلیک بر روی باتن ها می توان فعالیت مدنظر خود را انجام داد. در مقاله دکمه ها در HTML و CSS قصد داریم به بررسی این ویژگی در صفحات وب بپردازیم. همچنین با پیاده سازی دکمه های انیمیشن داده شده می تواند زیبایی صفحه وب خود را افزایش بدهید.

نحوه ایجاد Button

برای ایجاد یک دکمه باید از تگ button استفاده کرد. درون تگ button می توان محتویاتی که می خواهیم در خروجی به کاربر نمایش داده شود را وارد کنیم. ساختار استفاده از تگ باتن به شکل زیر می باشد.

<button>Default Button</button>

درون تگ button عبارتی نوشته شده است. در خروجی این عبارت بر روی دکمه نوشته شده و به کاربر نمایش داده می شود.

ایجاد دکمه پیشفرض در HTML و CSS

همانطور که مشاهده می کنید، دکمه پیشفرض ساخته شده زیبایی چندانی ندارد. شما می توانید به کمک استایل دهی در CSS دکمه ای متناسب با ظاهر سایت خود ایجاد کنید. در پایین کدهای ایجاد سه دکمه دیگر را مشاهده می کنید. با کمک کلاس button در بخش استایل ها، ظاهر این دکمه ها جذاب تر شده است.

در ابتدا بخش های 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 بیشتر صحبت خواهیم کرد. در این آموزش فقط با کمک content داده شده در after آن فلش ها را ایجاد کرده ایم.

خروجی کار در هنگام هاور شدن به شکل زیر خواهد بود:

هاور شدن دکمه ها

فلش های قبل متن با حالت انیمیشنی خاصی در هنگام هاور شدن ظاهر می شوند.

جمع بندی

در این آموزش سعی شد تا بررسی کاملی بر روی دکمه ها و نحوه پیاده سازی آنها داشته باشیم. همچنین استایل هایی به دکمه ها دادیم و حالت های مختلف آن را بررسی نمودیم. در آموزش های بعدی دکمه هایی با جذابیت بیشتر و ویژگی های ظاهری بهتری را ایجاد خواهیم کرد.

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

2سال در کنار تاتژن

guest
0 Comments
Inline Feedbacks
View all comments