Дизайн кнопки с помощью СSS

21 августа 2019, 09:40

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

Answer 1

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

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>

Answer 2

Можно подобное реализовать на 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%); 
}