아이콘이 있는 버튼만들기

아이콘이 있는 버튼을 만드는 경우가 많다

하지만 만들때마다 아이콘을 이미지태그로 넣는 경우도 있고 버튼의 배경처리를 한다음 text-indent를 이용하기도 하는데

만들다보니 규칙도 없고 버튼 속 텍스트의 길이가 바뀌거나 버튼의 width가 넓어질때 등등 유연하게 대응하지 못할 경우가 많았다

 

그래서 두가지 종류의 버튼을 다시 만들어 보았다

 

 

 

 

흰색 버튼은 버튼의 width가 고정되어있고 글자가 길어져서 버튼의 텍스트가 떨어지더라도 아이콘이 항상 가운데에 위치할 수 있도록 만든 것이다

 

보라색 버튼은 최소 width가 있는 상태에서 글자 텍스트가 길어지거나 width가 100%가 되더라도 아이콘이 항상 텍스트 옆에 붙어있는 상태로 만들어졌다

 

 

이미지처럼 흰색 버튼의 텍스트는 버튼의 width가 정해져있어 텍스트가 떨어지더라도

아이콘이 항상 가운데에 위치한다

 

 

흰색 버튼의 width를 정하지 않으면 텍스트 길이에 맞춰서 버튼의 width가 늘어난다

 

button.icon-btn{
  position:relative;
  padding:10px;
  padding-left:30px;
  /*max-width: 100px;*//*이걸 수정합니다*/
  color:#6b7799;
  font-size:14px;
  background-color:#fff;
  border:1px solid #292c33;
  border-radius:4px;
  box-sizing:border-box;
  cursor:pointer;
}

 

코드에서 max-width를 빼면 흰색 버튼은 길이에 따라 늘어난다

 

 

회사에선 미디어쿼리를 사용해서 웹 -> 모바일로 화면이 넘어갈 때

버튼이 화면의 100%로 사용될 때가 많다

이럴때 아이콘이 있는 버튼일 경우엔 두번째 버튼 css를 사용해야 아이콘이 텍스트 옆에 붙어있다

 

 

하지만 흰색버튼과 보라색 버튼 두가지의 장점을 섞어 

아이콘이 항상 가운데에 위치해있으면서 버튼의 width 100%가 될때에도 

텍스트 옆에 아이콘이 위치하도록 하는 방법을 아직 생각하지 못했다

(오늘은 여기까지밖에 생각이 떠오르지 않는다ㅠㅠ)

아이콘이 있는 버튼을 만드는 더 좋은 방법이 있다면 댓글로 알려주세요ㅠㅠ

 

두가지 방법을 기준으로 회사에서 이상하게 사용하고 있는 버튼 태그를 바꾸는 작업을 해야할 것 같다

 

※ 21.01.24 
위에서 고민했던 부분을 해결하여 아래글에 작성해두었습니다.

https://kure0406.tistory.com/52

아이콘이 있는 버튼만들기 - 2

 

---

 

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다