Главная » Симпатичные кнопки для сайта на CSS

Симпатичные кнопки для сайта на CSS


14.07.2021, 18:20


Демо

Базовая основа кнопки:

Код

<button type="button" class="btn">Кнопка</button>

Общие для всех кнопок стили:

Код

.btn {
  min-width: 100px;
  border-radius: 3px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
}

Код кнопок с индивидуальными классами:

Код

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary2">Primary2</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning2">Warning2</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger2">Danger2</button>

Индивидуальные CSS-стили для всех кнопок:

Код

.btn-default {
  background-color: #fff;
  border-color: #eaeaea;
  color: #6a6c6f;
}

.btn-primary {
  background-color: #34495e;
  border-color: #34495e;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #3f5872;
  border-color: #3f5872;
  color: #fff
}

.btn-primary2 {
  background-color: #9b59b6;
  border-color: #9b59b6;
  color: #fff;
}

.btn-primary2:hover,
.btn-primary2:focus,
.btn-primary2:active,
.btn-primary2.active {
  background-color: #a86ebf;
  border-color: #a86ebf;
  color: #fff
}

.btn-info {
  background-color: #3498db;
  border-color: #3498db;
  color: #fff;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
  background-color: #4ea5e0;
  border-color: #4ea5e0;
  color: #fff
}

.btn-success {
  background-color: #62cb31;
  border-color: #62cb31;
  color: #fff
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: #74d348;
  border-color: #74d348;
  color: #fff
}

.btn-warning {
  background-color: #ffb606;
  border-color: #ffb606;
  color: #fff
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
  background-color: #ffbf25;
  border-color: #ffbf25;
  color: #fff
}

.btn-warning2 {
  background-color: #e67e22;
  border-color: #e67e22;
  color: #fff
}

.btn-warning2:hover,
.btn-warning2:focus,
.btn-warning2:active,
.btn-warning2.active {
  background-color: #e98e3d;
  border-color: #e98e3d;
  color: #fff
}

.btn-danger {
  background-color: #e74c3c;
  border-color: #e74c3c;
  color: #fff
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: #ea6557;
  border-color: #ea6557;
  color: #fff
}

.btn-danger2 {
  background-color: #c0392b;
  border-color: #c0392b;
  color: #fff
}

.btn-danger2:hover,
.btn-danger2:focus,
.btn-danger2:active,
.btn-danger2.active {
  background-color: #d24637;
  border-color: #d24637;
  color: #fff
}

КОММЕНТАРИИ (0)

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]