Button_ 여러 버튼 속성지정

* btn--abc 속성을 이용해 버튼의 성질을 나타내는 클라스를 만들어 각각의 요소에 지정해 줄 수 있다.

 

1. html에 btn 클래스를 지정

 <a href="url" class="btn">HI</a>

 

2. CSS에 모든 버튼에 공통으로 들어갈 .btn 속성을 넣어준다. 

 

예)

.btn{
  width: 130px;
  border: 2px solid #333;
  padding:10px;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

3. btn--abc 로 각각의 속성을 지정

예)

.btn:hover{               
  background-color:#333;
  color:white 
}

// 버튼(갈색)
.btn.btn--brown {
  color: #592B18;
  border-color: #592B18;
}
.btn.btn--brown:hover {
  color: #FFF;
  background-color: #592B18;
}

// 버튼(금색)
.btn.btn--gold {
  color: #D9AA8A;
  border-color: #D9AA8A;
}
.btn.btn--gold:hover {
  color: #FFF;
  background-color: #D9AA8A;
}

// 버튼(흰색)
.btn.btn--white {
  color: #FFF;
  border-color: #FFF;
}
.btn.btn--white:hover {
  color: #333;
  background-color: #FFF;
}

// 버튼(기본속성과 반대)
.btn.btn--reverse {
  background-color: #333;
  color: #FFF;
}
.btn.btn--reverse:hover {
  background-color: transparent;
  color: #333;
}

 

4. html 에 필요한 btn--abc클래스를 추가해준다.

 

예)갈색버튼을 넣어준다.

<a href="URL" class="btn btn--brown">HI</a>