[CSS] 버튼 만들기

🔗 Codepen : 즉각적인 CSS 적용에 유용한 사이트 

https://codepen.io/pen/

Create a New Pen

 

---

<div class="btn1">Hello btn1</div>
<div class="btn2">Hello btn2</div>
<div class="btn3">Hello btn3</div>
<div class="btn4">Hello btn4</div>

 

.btn1{   width :300px;   height: 60px;   background: #eee linear-gradient(to bottom, #fcfcfc, #eee);   border: 1px solid #d5d5d5;   border-radius: 4px; }

❔ 버튼의 텍스트가 왼쪽 상단에 위치 되어있다.

btn1

.btn2{

  width :300px;
  height: 60px;
  background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding : 0 12px; 
  box-sizing: border-box;
}

 

btn2

# 버튼의 텍스트 중앙 정렬

1 > 중앙으로 몰기 좋은 display:flex;

2 > 텍스트 수직 가운데 정렬 align-items:center;

3 >가로 사이즈 (width)를 없애기

4 > 여백(padding)을 통해 수평정렬 

padding: 0 12px;  (상하 0px 좌우 12px)

5 > padding/margin이 너비와 높이에 영향을 주지않도록  box-sizing: border-box;

1➡6 > 버튼의 width가 텍스트 너비 만큼 차지하도록 display:inline-flex;

 

---

display : flex; vs  display : inline-flex;

- display:flex; : block 요소처럼 가로사이즈 auto (width :100%와 유사하게 동작)

 

- display : inline-flex; : inline 요소화 한다.

block 요소처럼 가로너비 전체를 사용하는 것이 아닌 

컨텐츠 너비만큼만 사용

✅
display:flex; ( block 요소 )➡ display : inline-flex; ( inline 요소 )
컨텐츠의 글자의 맞게 너비를 알아서 자동으로 조절된다❗

 

---

.btn3{
  height: 60px;
  background: #eee linear-gradient(to bottom, #fcfcfc, #eee);
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  padding : 0 12px; 
  box-sizing: border-box;
}

.btn4{
  height: 34px;
  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;

  color: #333;
}

btn3 / btn4

 

---

 

마우스 hover 상태

<div class="btn">default btn</div>

 

가상요소 선택자 :: before

- 버튼 내부 앞에 특정요소를 만든다.

- 요소는 position: absolute;를 사용한다.

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

✔ 절대위치를 사용할 때 부모요소에 position 값이 있는지 확인해야한다.

부모요소에 position 값이 없어 추가해줘야할 때는 position: relative;  작성해준다.
✅ 부모요소 기준으로 배치하고 검정색의 7%투명도로 hover상태를 표현하겠다.

 

 

.btn{
  height: 34px;
  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;
  position: relative;
  color: #333;
}

기본적인 상태의 버튼

<div class="btn btn--primary">primary</div>

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

 

​

primary

hover 상태