Блог

Главная - Вопросы по программированию - Добавление значка избранного в кнопку с использованием только CSS

Добавление значка избранного в кнопку с использованием только CSS

#css #favicon

#css #значок избранного

Вопрос:

https://codepen.io/danielworton/pen/ZZLEMO

Здравствуйте, я пытаюсь воссоздать кнопку в приведенном выше codepen, и у меня возникла проблема с добавлением звездочек без изменения скрипта. Также двойная рамка разного цвета ~ Если у кого-нибудь есть какие-либо подсказки к решению, это было бы очень кстати!

#Мое решение заключается в следующем:

 a {
  border: solid 3px #212121;
  border-radius: 12px;
  background-image: linear-gradient(0deg,#D3D3D3 0%,#D3D3D3 50%,#e8e8e8 51%);
  color: #212121; 
  padding: 20px;
  text-align: center;
  text-decoration:none;
  text-transform: uppercase;
  font-family: "Lucida Console", Courier, monospace;
  font-size: 18px;
  width: 180px;
  height: 14px;
  display: inline-block;
  margin: auto;
}

Ответ №1:

Вы можете использовать псевдоэлементы для добавления дополнительных элементов:

 a {
  border: solid 2px #555;
  border-radius: 12px;
  background-image: linear-gradient(0deg, #D3D3D3 0%, #D3D3D3 50%, #e8e8e8 51%);
  color: #555;
  padding: 20px 20px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Arial";
  font-size: 18px;
  width: 180px;
  height: 14px;
  display: inline-block;
  margin: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-shadow: 1px 1px 1px white;
  font-weight: 600;
  box-shadow: 0 0 0 6px #D3D3D3, 0 0 0 8px #555;
}
a:after, a:before {
  content: '★';
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 24px;
  line-height: 24px;
}
a:before {
  justify-content: flex-end;
}  
 <a href="#">
  Checkout
</a>

Хотя, я думаю, количество границ на этой кнопке довольно нелепо ожидать от одного элемента.

Редактировать: вы можете добавить несколько границ с помощью boxshadows

Комментарии:

1. Это правильный способ сделать это. Чтобы реализовать то, что вы просили, вам нужно будет использовать boxshadows, как указано. Я никогда не сталкивался с этим как с вопросом о собеседовании — кто просил вас это делать?

2. Спасибо ~ как вы ввели символ звезды?

3. это часть задания для выпускников-разработчиков. Для репликации требуется два JS-бита и два CSS-изображения. У меня не было никаких проблем с другими, но с этим я застрял при вставке звездочек, не разрывая кнопку.

4. @CristianBurloiu Я только что скопировал его с этого сайта alt-codes.net/star_alt_code.php