CloseTag | الشروحات | CSS | الأزرار في لغة CSS | CSS Buttons

<!DOCTYPE html>
<html>
<head>
<style>
.btn
{
  border: none;
  color: black;
  padding: 15px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius:5px;
  margin:5px;
}

.border-primary
{
  border:solid 1px #0d6efd;
}

.border-primary:hover
{
  color:white;
  background-color:#0d6efd;
}

.border-danger
{
  border:solid 1px #dc3545;
}

.border-danger:hover
{
  color:white;
  background-color:#dc3545;
}

.border-secondary
{
  border:solid 1px #6c757d;
}

.border-secondary:hover
{
  color:white;
  background-color:#6c757d;
}

.border-success
{
  border:solid 1px #198754;
}

.border-success:hover
{
  color:white;
  background-color:#198754;
}

.border-warning
{
  border:solid 1px #ffc107;
}

.border-warning:hover
{
  color:white;
  background-color:#ffc107;
}

.border-info
{
  border:solid 1px #0dcaf0;
}

.border-info:hover
{
  color:white;
  background-color:#0dcaf0;
}

.border-light
{
  border:solid 1px white;
  color:black;
}

.border-light:hover
{
  color:wite;
  background-color:#dfe6e9;
}

.border-dark
{
  border:solid 1px #212529;
}

.border-dark:hover
{
  color:white;
  background-color:#212529;
}

.border-link
{
  border:solid 1px white;
  color:#0d6efd;
  text-decoration:underline;
}

.border-link:hover
{
  background-color:#dfe6e9;
}
</style>
</head>
<body>
  <h1>CSS Buttons</h1>
  <a class="btn border-primary">Login</a>
  <a class="btn border-secondary">Login</a>
  <a class="btn border-success">Login</a>
  <a class="btn border-danger">Login</a>
  <a class="btn border-warning">Login</a>
  <a class="btn border-info">Login</a>
  <a class="btn border-light">Login</a>
  <a class="btn border-dark">Login</a>
  <a class="btn border-link">Login</a>
</body>
</html>

PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHN0eWxlPg0KLmJ0bg0Kew0KICBib3JkZXI6IG5vbmU7DQogIGNvbG9yOiBibGFjazsNCiAgcGFkZGluZzogMTVweCAzMHB4Ow0KICB0ZXh0LWFsaWduOiBjZW50ZXI7DQogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsNCiAgZGlzcGxheTogaW5saW5lLWJsb2NrOw0KICBmb250LXNpemU6IDE2cHg7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgYm9yZGVyLXJhZGl1czo1cHg7DQogIG1hcmdpbjo1cHg7DQp9DQoNCi5ib3JkZXItcHJpbWFyeQ0Kew0KICBib3JkZXI6c29saWQgMXB4ICMwZDZlZmQ7DQp9DQoNCi5ib3JkZXItcHJpbWFyeTpob3Zlcg0Kew0KICBjb2xvcjp3aGl0ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjojMGQ2ZWZkOw0KfQ0KDQouYm9yZGVyLWRhbmdlcg0Kew0KICBib3JkZXI6c29saWQgMXB4ICNkYzM1NDU7DQp9DQoNCi5ib3JkZXItZGFuZ2VyOmhvdmVyDQp7DQogIGNvbG9yOndoaXRlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiNkYzM1NDU7DQp9DQoNCi5ib3JkZXItc2Vjb25kYXJ5DQp7DQogIGJvcmRlcjpzb2xpZCAxcHggIzZjNzU3ZDsNCn0NCg0KLmJvcmRlci1zZWNvbmRhcnk6aG92ZXINCnsNCiAgY29sb3I6d2hpdGU7DQogIGJhY2tncm91bmQtY29sb3I6IzZjNzU3ZDsNCn0NCg0KLmJvcmRlci1zdWNjZXNzDQp7DQogIGJvcmRlcjpzb2xpZCAxcHggIzE5ODc1NDsNCn0NCg0KLmJvcmRlci1zdWNjZXNzOmhvdmVyDQp7DQogIGNvbG9yOndoaXRlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiMxOTg3NTQ7DQp9DQoNCi5ib3JkZXItd2FybmluZw0Kew0KICBib3JkZXI6c29saWQgMXB4ICNmZmMxMDc7DQp9DQoNCi5ib3JkZXItd2FybmluZzpob3Zlcg0Kew0KICBjb2xvcjp3aGl0ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjojZmZjMTA3Ow0KfQ0KDQouYm9yZGVyLWluZm8NCnsNCiAgYm9yZGVyOnNvbGlkIDFweCAjMGRjYWYwOw0KfQ0KDQouYm9yZGVyLWluZm86aG92ZXINCnsNCiAgY29sb3I6d2hpdGU7DQogIGJhY2tncm91bmQtY29sb3I6IzBkY2FmMDsNCn0NCg0KLmJvcmRlci1saWdodA0Kew0KICBib3JkZXI6c29saWQgMXB4IHdoaXRlOw0KICBjb2xvcjpibGFjazsNCn0NCg0KLmJvcmRlci1saWdodDpob3Zlcg0Kew0KICBjb2xvcjp3aXRlOw0KICBiYWNrZ3JvdW5kLWNvbG9yOiNkZmU2ZTk7DQp9DQoNCi5ib3JkZXItZGFyaw0Kew0KICBib3JkZXI6c29saWQgMXB4ICMyMTI1Mjk7DQp9DQoNCi5ib3JkZXItZGFyazpob3Zlcg0Kew0KICBjb2xvcjp3aGl0ZTsNCiAgYmFja2dyb3VuZC1jb2xvcjojMjEyNTI5Ow0KfQ0KDQouYm9yZGVyLWxpbmsNCnsNCiAgYm9yZGVyOnNvbGlkIDFweCB3aGl0ZTsNCiAgY29sb3I6IzBkNmVmZDsNCiAgdGV4dC1kZWNvcmF0aW9uOnVuZGVybGluZTsNCn0NCg0KLmJvcmRlci1saW5rOmhvdmVyDQp7DQogIGJhY2tncm91bmQtY29sb3I6I2RmZTZlOTsNCn0NCjwvc3R5bGU+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiA6Oi13ZWJraXQtc2Nyb2xsYmFye3dpZHRoOjdweDtoZWlnaHQ6N3B4O306Oi13ZWJraXQtc2Nyb2xsYmFyLXRyYWNre2JhY2tncm91bmQ6I2ZmZjt9Ojotd2Via2l0LXNjcm9sbGJhci10aHVtYntib3JkZXItcmFkaXVzOjVweDtiYWNrZ3JvdW5kOiMyZjQ1ZmY7fTwvc3R5bGU+PC9oZWFkPg0KPGJvZHk+DQogIDxoMT5DU1MgQnV0dG9uczwvaDE+DQogIDxhIGNsYXNzPSJidG4gYm9yZGVyLXByaW1hcnkiPkxvZ2luPC9hPg0KICA8YSBjbGFzcz0iYnRuIGJvcmRlci1zZWNvbmRhcnkiPkxvZ2luPC9hPg0KICA8YSBjbGFzcz0iYnRuIGJvcmRlci1zdWNjZXNzIj5Mb2dpbjwvYT4NCiAgPGEgY2xhc3M9ImJ0biBib3JkZXItZGFuZ2VyIj5Mb2dpbjwvYT4NCiAgPGEgY2xhc3M9ImJ0biBib3JkZXItd2FybmluZyI+TG9naW48L2E+DQogIDxhIGNsYXNzPSJidG4gYm9yZGVyLWluZm8iPkxvZ2luPC9hPg0KICA8YSBjbGFzcz0iYnRuIGJvcmRlci1saWdodCI+TG9naW48L2E+DQogIDxhIGNsYXNzPSJidG4gYm9yZGVyLWRhcmsiPkxvZ2luPC9hPg0KICA8YSBjbGFzcz0iYnRuIGJvcmRlci1saW5rIj5Mb2dpbjwvYT4NCjwvYm9keT4NCjwvaHRtbD4=