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-danger
{
  border:solid 1px #dc3545;
}

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

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

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

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

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

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

.border-link
{
  border:solid 1px white;
  color:#0d6efd;
  text-decoration:underline;
}
</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>