빠른 프로토 타이핑을 위해 디자인 된 현대적이고 유용한 CSS 라이브러리에는 여러 가지 구성 요소가 포함되어 있으며 스타일을 사용자 정의하여 디자인에 다른 모양을 줄 수 있습니다!

https://knopf.dev/ 

https://github.com/team-video/knopf.css 

<link rel="stylesheet" href="/knopf.min.css">

모든 내장 수정 자에 동일한 논리가 적용됩니다. 운동장에서 테스트 해보십시오. 또한 사용자 정의 가능한 전체 사용자 정의 속성 목록을 보려면 소스 코드를 살펴 보는 것이 좋습니다.

.knopf.knopf {
  --knopf-raised-height: 6px;
  border-block-end-color: var(--knopf-hover-background-color);
  border-block-end-width: var(--knopf-raised-height);
  margin-block-start: calc(var(--knopf-raised-height) * -1);
}

.knopf.knopf:hover {
  --knopf-raised-height: 2px;
  border-block-end-color: var(--knopf-active-background-color);
}

<button class="knopf negative">
  Button
</button>