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

#html #css

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

Ответы

Ответ 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;
}



Ответ 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%);
}