استایل دادن به دکمه در css | آموزش رایگان CSS

دکمه ها در حالت پیش فرض در HTML ظاهر خوبی ندارند و حتما باید استایل دهی شوند. بنابراین تنها بحثی که می توانیم در مورد دکمه ها انجام دهیم، روش و نوع استایل دادن به دکمه در css است که در واقع موضوع همین مقاله نیز می باشد.

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

روش های متعددی برای استایل دادن به دکمه در css وجود دارد. در مثال زیر ما استایل پیش فرض دکمه ها در HTML را با استایل دلخواه خودمان مقایسه کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>

مشاهده ی خروجی در JSBin

تعیین رنگ دکمه ها

برای تعیین رنگ دکمه ها باید از قابلیت background-color استفاده کنیم. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Gray */ 
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>Button Colors</h2>
<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

مشاهده ی خروجی در JSBin

اندازه ی دکمه ها

برای تعیین سایز دکمه ها معمولا از خاصیت font-size در CSS استفاده می شود. در مثال زیر دکمه ها را از چپ به راست به ترتیب 10 پیکسل، 12 پیکسل، 16 پیکسل، 20 پیکسل و 24 پیکسل تعیین کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>

<h2>Button Sizes</h2>
<p>Change the font size of a button with the font-size property:</p>

<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>

</body>
</html>

مشاهده ی خروجی در JSBin

البته لازم به ذکر است که خاصیت padding نیز در سایز دکمه ها نقش تعیین کننده ای دارد. به اندازه ی دکمه های زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>

<h2>Button Sizes</h2>
<p>Change the padding of a button with the padding property:</p>

<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>

</body>
</html>

مشاهده ی خروجی در JSBin

دکمه های گرد و دایره ای

خاصیت border-radius به شما اجازه می دهد که گوشه های دکمه را گِرد کرده یا به طور کل دکمه را به شکل بیضی یا دایره در بیاورید:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>
<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

مشاهده ی خروجی در JSBin

دکمه های توخالی

اگر رنگ دکمه ها را با رنگ پس زمینه ‌شان یکی کنیم و یا آن را به طور کامل transparent قرار دهیم، دکمه ها نامرئی می شوند. در این حالت می توانیم با اضافه کردن border یک دکمه ی تو خالی ایجاد کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}
</style>
</head>
<body>

<h2>Colored Button Borders</h2>
<p>Use the border property to add a border to the button:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

مشاهده ی خروجی در JSBin

تاثیر hover بر زیبائی

یکی از بهترین افکت ها برای بالا بردن زیبایی دکمه ها اضافه کردن انیمیشن است، اما نه هر انیمیشنی! برخی از انیمیشن ها آن قدر طولانی هستند که باعث اذیت شدن کاربر می شوند اما انیمیشن های کوتاه مانند hover (با استفاده از hover:) به زیبایی آن اضافه می کنند. یادتان باشد که با استفاده از transition-duration می توانید سرعت انیمیشن هایی مانند hover را تعیین کنید.

به چند مثال زیر که از ترکیب hover و دکمه های توخالی ایجاد شده اند، دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}

.button3 {
  background-color: white; 
  color: black; 
  border: 2px solid #f44336;
}

.button3:hover {
  background-color: #f44336;
  color: white;
}

.button4 {
  background-color: white;
  color: black;
  border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

.button5:hover {
  background-color: #555555;
  color: white;
}
</style>
</head>
<body>

<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the "hover" effect:</p>

<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد سایه برای دکمه ها

شما می توانید با خاصیت box-shadow به دکمه های خود سایه بدهید:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<h2>Shadow Buttons</h2>
<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on Hover</button>

</body>
</html>

مشاهده ی خروجی در JSBin

دکمه های غیرفعال

با استفاده از خاصیت opacity می توانید یک دکمه را کاملا بی رنگ کنید، اما اگر مقدار مناسبی به آن بدهید می توانید شکل آن را طوری تغییر دهید که انگار غیرفعال شده است. همچنین اگر به خاصیت cursor مقدار not-allowed بدهید نیز علامت «ممنوع» نمایش داده می شود و ظاهر را کامل می کند:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>
</head>
<body>

<h2>Disabled Buttons</h2>
<p>Use the opacity property to add some transparency to the button (make it look disabled):</p>

<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>

</body>
</html>

مشاهده ی خروجی در JSBin

عرض دکمه ها

در حالت پیش فرض، عرض یک دکمه به صورت خودکار و بر اساس محتویات متنی آن تعیین می شود اما ما می توانیم با استفاده از width آن را به صورت دلخواه خودمان تغییر دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
</style>
</head>
<body>

<h2>Button Width</h2>
<p>Use the width property to change the width of the button:</p>
<p><strong>Tip:</strong> Use pixels if you want to set a fixed width and use percent for responsive buttons (e.g. 50% of its parent element). Resize the browser window to see the effect.</p>

<button class="button button1">250px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>

</body>
</html>

مشاهده ی خروجی در JSBin

مجموعه دکمه ها

اگر بخواهیم مجموعه ای از دکمه ها داشته باشیم (یعنی چندین دکمه را در کنار هم قرار دهیم) می توانیم از خاصیت float:left یا float:right استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Button Groups</h2>
<p>Remove margins and float the buttons to create a button group:</p>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

در صورت نیاز می توانید به مثال بالا حاشیه (border) نیز اضافه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Bordered Button Group</h2>
<p>Add borders to create a bordered button group:</p>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین با تنظیم display روی حالت block و دستور float می توانید دکمه ها را روی هم (عمودی) قرار دهید:

<!DOCTYPE html>
<html>
<head>
<style>
.btn-group .button {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group .button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

.btn-group .button:hover {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Vertical Button Group</h2>

<div class="btn-group">
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
  <button class="button">Button</button>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ترکیب دکمه و تصویر

شما می توانید دکمه ی خود را روی یک تصویر قرار دهید! به طور مثال در کد زیر با استفاده از دستور position: relative توانسته ایم این کار را انجام دهیم:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.container .btn:hover {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

<h2>Button on Image</h2>
<p>Add a button to an image:</p>

<div class="container">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Snow" style="width:100%">
  <button class="btn">Button</button>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

انیمیشن های پیشرفته تر

با اینکه hover انیمیشن زیبایی است اما می توانیم از انیمیشن های پیشرفته تری استفاده کنیم.

مثال اول: در مثال زیر مشخص کرده ایم که در هنگام hover مقدار padding راست 25 پیکسل شود (افزایش یابد) و سپس با دستور after: علامت « را به دکمه اضافه کرده ایم. کد 00bb را که به content داده ایم، همان علامت « می باشد:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  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;
}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم: در این مثال می خواهیم حالت فشرده شدن را ایجاد کنیم. برای این کار ابتدا با استفاده از box-shadow زیر دکمه ی خود سایه ای خاکستری اضافه می کنیم (به حالتی که پخش نشده باشد). سپس می گوییم در حالت active: مقدار box-shadow را کمتر کند. این مسئله باعث ایجاد یک انیمیشن جالب می شود:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<body>

<h2>Animated Buttons - "Pressed Effect"</h2>

<button class="button">Click Me</button>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال سوم: می خواهیم حالت ripple یا انعکاس را ایجاد کنیم. در این حالت زمانی که روی دکمه کلیک شود لایه ی دیگری روی دکمه پخش می شود (مانند افتادن سنگ در آب):

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  position: relative;
  background-color: #4CAF50;
  border: none;
  font-size: 28px;
  color: #FFFFFF;
  padding: 20px;
  width: 200px;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #f1f1f1;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}
</style>
</head>
<body>

<h2>Animated Button - Ripple Effect</h2>

<button class="button">Click Me</button>

</body>
</html>

مشاهده ی خروجی در JSBin

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

رضا

07 شهریور 1399

عالی

مهران اسماعیلی

24 اردیبهشت 1399

سلام من به نوبه خودم و تمام کسانی که میان و از مطالب شما استفاده می کنن ولی نظر نمیدن ، میخ.ام یه تشکر ویژه از شما بکنم که این مطالب رو به صورت رایگان در اختیار من و امثال بنده قرار دادید - درد و بلای شما بخوره تو سر تمام سایت های آموزشی دیگه که نمیخ.ام اسم بیارم - هرکسی هم فکر کرده من پسر خاله یا پسر عموی شما هستم به جهنم - من دست شما رو میبوسم شما با این کارتون در ایران شاهکار کردید.