[HTML/CSS] 기본 버튼(button) CSS 만들기

>> 기본적인 버튼 CSS 만들기

.btn {
    position: relative;
    height: 35px;
    background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    display: inline-flex; 
    align-items: center;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    box-sizing: border-box;
}

.btn:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.07);
}

.btn.btn--primary {
    border: 1px solid #65b836;
    color: #fff;
    background: #55a532 linear-gradient(#91dd70, #55ae2e);
}

버튼 안 내용이 수직 정렬하도록 돕는 코드
- display: inline-flex;
(inline은 내용만큼만 요소가 크기를 갖도록 해줌 / flex는 block요소처럼 기본 width값이 auto, 100%임)
- align-items: center;
( <- 수직 정렬 / 만약 수평 정렬을 원한다면, justify-content: center; 를 작성해야 한다 , 단, flex-direction: row일 경우 )

- font-weight: 500
(400:normal 보다 약간 두꺼운 폰트)




>>> 결과  (왼쪽은 그냥 class="btn", 오른쪽은 class= "btn btn--primary")

출처
- fastcampus,
- HeropCode github.com/HeropCode/GitHub-Responsive