Кнопки

HTML

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

CSS

.my-button {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  transition: background-color 0.3s ease;
}

.my-button:hover {
  background-color: #1A2C54;
}

.my-button:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
    .my-button {
        padding: 12px 35px;
        font-size: 14px;
    }
}

HTML

<button type="button" class="my-button-rounded">Кнопка</button>

CSS

.my-button-rounded {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.my-button-rounded:hover {
  background-color: #1A2C54;
}

.my-button-rounded:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
    .my-button-rounded {
        padding: 12px 35px;
        font-size: 14px;
    }
}

HTML

<button type="button" class="my-button-pill">Кнопка</button>

CSS

.my-button-pill {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  border-radius: 9999px;
  transition: background-color 0.3s ease;
}

.my-button-pill:hover {
  background-color: #1A2C54;
}

.my-button-pill:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
    .my-button-pill {
        padding: 12px 35px;
        font-size: 14px;
    }
}

HTML

<button type="button" class="my-button-clipped-left">Кнопка</button>

CSS

.my-button-clipped-left {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  transition: background-color 0.3s ease;
  clip-path: polygon(0 0, calc(100% - clamp(6px, 1.5vw, 14px)) 0, 100% clamp(6px, 1.5vw, 14px), 100% 100%, clamp(6px, 1.5vw, 14px) 100%, 0 calc(100% - clamp(6px, 1.5vw, 14px)));
}

.my-button-clipped-left:hover {
  background-color: #1A2C54;
}

.my-button-clipped-left:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
    .my-button-clipped-left {
        padding: 12px 35px;
        font-size: 14px;
    }
}

HTML

<button type="button" class="my-button-clipped-right">Кнопка</button>

CSS

.my-button-clipped-right {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  transition: background-color 0.3s ease;
  clip-path: polygon(clamp(6px, 1.5vw, 14px) 0, 100% 0, 100% calc(100% - clamp(6px, 1.5vw, 14px)), calc(100% - clamp(6px, 1.5vw, 14px)) 100%, 0 100%, 0 clamp(6px, 1.5vw, 14px));
}

.my-button-clipped-right:hover {
  background-color: #1A2C54;
}

.my-button-clipped-right:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
    .my-button-clipped-right {
        padding: 12px 35px;
        font-size: 14px;
    }
}

HTML

<button type="button" class="my-button-arrow">Кнопка</button>

CSS

.my-button-arrow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 38px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  transition: background-color 0.3s ease;
  position: relative;
}

.my-button-arrow:hover {
  background-color: #1A2C54;
}

.my-button-arrow:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

.my-button-arrow::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M1.16675 6.99996H12.8334M12.8334 6.99996L7.00008 1.16663M12.8334 6.99996L7.00008 12.8333' stroke='%23FFFFFF' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 10px;
  transition-duration: .3s;
}

.my-button-arrow:hover::after {
    transform: translateX(3px);
}

@media (max-width: 500px) {

    .my-button-arrow {
        padding: 12px 26px;
        font-size: 14px;
    }

    .my-button-arrow::after {
        width: 10px;
        height: 10px;
        margin-left: 8px;
    }

}

HTML

<button type="button" class="my-button-f1">Кнопка</button>

CSS

.my-button-f1 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  border: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 0;
}

.my-button-f1::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1A2C54;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}

.my-button-f1:hover::before {
  transform: scaleX(1);
}

.my-button-f1:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
  .my-button-f1 {
    padding: 12px 35px;
    font-size: 14px;
  }
}

HTML

<button type="button" class="my-button-f2">Кнопка</button>

CSS

.my-button-f2 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.my-button-f2::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scaleX(0.1);
  transition: all 0.3s ease;
}

.my-button-f2::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255,255,255,0.08);
  transition: all 0.3s ease;
}

.my-button-f2:hover {
  background-color: #1A2C54;
}

.my-button-f2:hover::before {
  opacity: 1;
  transform: scaleX(1);
}

.my-button-f2:hover::after {
  opacity: 0;
  transform: scaleX(0.1);
}

.my-button-f2:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
  .my-button-f2 {
    padding: 12px 35px;
    font-size: 14px;
  }
}

HTML

<button type="button" class="my-button-f3">
  Кнопка
  <svg>
    <rect x="0" y="0" width="100%" height="100%"></rect>
  </svg>
</button>

CSS

.my-button-f3 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  border: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.my-button-f3 svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.my-button-f3 rect {
  fill: none;
  stroke: #2e4a82;
  stroke-width: 2;
  stroke-dasharray: 400, 0;
  transition: all 0.35s linear;
}

.my-button-f3:hover {
  background-color: #678edc1c;
  color: #2e4a82;
}

.my-button-f3:hover rect {
  stroke-width: 4;
  stroke-dasharray: 55, 150;
  stroke-dashoffset: 15;
  transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.my-button-f3:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
  .my-button-f3 {
    padding: 12px 35px;
    font-size: 14px;
  }
}

HTML

<button type="button" class="my-button-f4">Кнопка</button>

CSS

.my-button-f4 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 15px 50px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.my-button-f4::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 110%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-30deg);
  transition: opacity 0.1s;
}

.my-button-f4:hover::before {
  opacity: 1;
  animation: button-shine 1.9s ease-in-out;
}

@keyframes button-shine {
    0% {
        left: -150%;
    }
    20% {
        left: 110%;
    }
    100% {
        left: 110%;
    }
}

.my-button-f4:active {
  filter: brightness(110%);
  transform: translateY(1px);
}

@media (max-width: 500px) {
  .my-button-f4 {
    padding: 12px 35px;
    font-size: 14px;
  }
}

Как сделать кнопку на HTML и CSS — готовые сниппеты кода для верстки

Готовые примеры кнопок на чистом HTML и CSS. Быстро настраиваемые, адаптивные и лёгкие для встраивания в любые проекты. Подходят для лендингов, интернет-магазинов, блогов и административных панелей. Все решения можно скопировать, адаптировать и использовать без подключения сторонних библиотек.

Особенности:

Разные варианты кнопок: круглые, широкие, c иконками
Простая адаптация под дизайн проекта
Совместимость со всеми современными браузерами
Адаптивная верстка для мобильных и десктопов
Чистый и понятный код на HTML и CSS
Поддержка анимаций и эффектов при наведении

Кнопки — это неотъемлемая часть любого сайта. Они используются для навигации, отправки форм, запуска действий и привлечения внимания пользователя. Важно, чтобы кнопка выглядела современно, была заметной и оставалась удобной на всех устройствах — от смартфона до большого экрана. Именно поэтому мы собрали универсальные решения.