x
 
Фёдор Волков
3 января 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст, можно ли сделать такую кнопку без фоновой картинки?


Если фон заре­нее изве­стен и одно­ро­ден, можно про­сто накрыть гра­ди­ент плаш­кой того же цвета.

Для начала собе­рём кнопку пол­но­стью зали­тую градиентом:

/* html */
​        
<button>
  Кнопка
</button>
/* css */
​
/* Кнопка */
button {
  height: 60px;
  border: 0;
  border-radius: 30px;
  font-size: 20px;
  text-transform: uppercase;
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

Теперь накроем часть кнопки белой плашкой:

/* html */
​        
<button>
  <span>Кнопка</span>
</button>
/* css */
​        
button {
  /* ... */
​        
  /* Зада­дим отступ со всех сто­рон рав­ный
  жела­е­мой тол­щине рамки */
  padding: 4px;
}
​        
/* Доба­вим белую плашку с таким же ради­у­сом
скруг­ле­ния как и у самой кнопки */
button span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 50px;
  height: 100%;
  border-radius: 30px;
  background: #fff;
}
​        
/* Спря­чем плашку при наве­де­нии */
button:hover span {
  background: transparent;
}

Если фон неиз­ве­стен или нерав­но­ме­рен, а скруг­ле­ния не нужны, подой­дёт border-image:

/* html */
​
<button>
  Кнопка
</button>
/* css */
​        
/* Кнопка */
button {
  /* ... */
​        
  background: none;
  border-width: 4px;
  border-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
  border-image-slice: 1;
}
​        
button:hover {
  background-image: linear-gradient(
    to right, 
    #45aee5 0%, 
    #6be492 100%
  );
}

В сле­ду­ю­щем совете попро­буем сов­ме­стить и то, и другое.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Разработчик, который не думает, а просто делает — не нужен? 4 Что делает тег meta с атрибутом name="viewport"? Зачем его указывать? Автотесты «на пальцах» 1 Как следить за качеством кода? Часть третья: процессы 3




Недавно всплыло

4 Почему эспрессо стоит 100 рублей, а американо 150? 3 2 2