3

Подскажите пожалуйста, как можно сделать такой дизайн кнопки с помощью CSS или только можно с наложением background?введите сюда описание изображения

3
  • Опишите словами, что значит «такой дизайн», чтобы и вопрос стал понятнее, и в поисковиках он проиндексировался лучше (вопросы с одними лишь картинками плохо ищутся и бесполезны для базы знаний)
    – andreymal
    20 янв 2019 в 15:54
  • Я имею в виду, чтобы был не просто розовый фон, а с "лучами", выходящими из правого верхнего угла. То есть я не представляю как можно такое организовать с помощью CSS) 20 янв 2019 в 16:02
  • вот зафотошопил чуть чуть вариант ? 20 янв 2019 в 16:29

2 ответа 2

4

Это самое крутое что я смог выдумать :

button {
  display: block;
  position: relative;
  background: none;
  width: 250px;
  height: 80px;
  z-index: 100;
  overflow: hidden;
}

button span {
  position: relative;
}

button:before {
  content: "";
  width: 200%;
  height: 100%;
  display: block;
  background-color: tomato;
  background-image: conic-gradient(red 240deg, red 260deg, transparent 260deg, transparent 280deg, red 280deg, red 300deg, transparent 300deg, transparent 320deg, red 320deg, red 340deg);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
<button>
  <span>какая то кнопка</span>
</button>

1

Можно подобное реализовать на CSS, отдалено похожий пример:

div {
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  background: linear-gradient(#f90, #95a);
  -webkit-mask: repeating-conic-gradient(#000 0% 2.5%, transparent 0% 5%);
  mask: repeating-conic-gradient(#000 0% 2.5%, transparent 0% 5%);
}
<div></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.