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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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