Подскажите пожалуйста, как можно сделать такой дизайн кнопки с помощью CSS или только можно с наложением background
?
-
Опишите словами, что значит «такой дизайн», чтобы и вопрос стал понятнее, и в поисковиках он проиндексировался лучше (вопросы с одними лишь картинками плохо ищутся и бесполезны для базы знаний)– andreymal20 янв 2019 в 15:54
-
Я имею в виду, чтобы был не просто розовый фон, а с "лучами", выходящими из правого верхнего угла. То есть я не представляю как можно такое организовать с помощью CSS)– Валерий20 янв 2019 в 16:02
-
вот зафотошопил чуть чуть вариант ?– Monkey Mutant20 янв 2019 в 16:29
Добавить комментарий
|
2 ответа
Это самое крутое что я смог выдумать :
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>
Можно подобное реализовать на 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>