JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<button type="button" class="btn type01">border-width: 0</button>
<button type="button" class="btn type02">border-color: transparent;</button>

SCSS

* {
  box-sizing: border-box;
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 550px;
  /* height: 60px; */
  padding: 10px;
  border: 2px solid #000000;
  margin: 4px auto;
  font-size: 30px;
  font-family: Arial;
  text-transform: uppercase;
  background-color: #EEEEEE;
  background-origin: border-box;
  &.type01 {
    &:hover {
      border-width: 0;
    }
  }
  &.type02 {
    &:hover {
      border-color: transparent;
    }
  }
}