News Grid (5) Category & Button Utility

카테고리 기본 스타일

.category {
  display: inline-block;
  color: #fff;
  font-size: 0.55rem;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border-radius: 15px;
  margin-bottom: 0.5rem;
}

 

카테고리별 배경색

.category-sports {
  background: var(--sports-color);
}
.category-ent {
  background: var(--ent-color);
}
.category-tech {
  background: var(--tech-color);
}

 

 

버튼 기본 스타일

.btn {
  display: inline-block;
  border: none;
  background: var(--dark-color);
  color: #fff;
  padding: 0.5rem 1.5rem;
}

 

 

버튼 배경 색

.btn-light {
  background: var(--light-color);
}
.btn-primary {
  background: var(--primary-color);
}
.btn-secondary {
  background: var(--secondary-color);
}

 

 

가로 다 차지하는 넓은 버튼

.btn-block{
    display:block;
    width:100%;
    text-align:center;
}

 

 

버튼 hover over 했을 때,

.btn:hover{
    opacity:0.9;
}

 

 

sports 카테고리와 primary button이 생긴 모습