• Q&A
  • 회원가입
  • 로그인

[button] CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)

67,939  
목차
  1. 버튼 기본스타일 (Button Basic Styling)
  2. 버튼 색깔 (Button Color)
  3. 버튼 크기 (Button Size)
  4. 버튼 모서리 둥글게 (Rounded Button)
  5. 버튼 허버 (Button Hover)
  6. 버튼 그림자/음영 (Shadow Button)
  7. 버튼 비활성화/클릭방지 (Disabled Button)
  8. 버튼 그룹 수평 배치 - 왼쪽 배치
  9. 버튼 그룹 수평 배치 - 균등 배분
  10. 버튼 그룹 수직 배치
  11. 버튼 이미지 위에 배치 (Button on Image)
  12. 버튼 허버 시 서브요소 노출 (Arrow Effect)
  13. 버튼 허버/클릭 시 배경색 변경
  14. 버튼 서서히 진하게/흐르게 (Fade in Effect)
  15. 버튼 클릭 시 잔물결 효과 (Wave Effect)

 

버튼 기본스타일 (Button Basic Styling) 

 

<style>

.button {

  background-color: blue;

  border: none;

  color: white;

  padding: 15px 30px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

  font-size: 16px;

  margin: 4px 2px;

  cursor: pointer;

}

</style>


<button>기본 버튼</button>

<a href="#" class="button">A요소 버튼</a>

<button class="button">BUTTON요소 버튼</button>

<input type="button" class="button" value="INPUT 버튼">

 

결과보기

※ 버튼은 <a> , <button> , <input> 요소로 제작 가능.

 

버튼 색깔 (Button Color)

 

<style>

.button {background-color: blue;}

.b {background:red;}

.c {background:green;}

</style>

 

결과보기

※ 버튼색깔: background 속성 이용

 

버튼 크기 (Button Size)

[방법1 - padding 이용]

 

.button {font-size:OOpx; padding:OOpx OOpx}

 


[방법2 - width 이용]

 

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

 

결과보기

 

 

 

버튼 모서리 둥글게 (Rounded Button)

 

.button {border-radius: 5px;}

.button {border-radius: 50%;}

 

※ 둥근모서리 : border-radius 속성 이용

 

버튼 허버 (Button Hover)

 

.button {

  -webkit-transition-duration: 0.4s; /* Safari */

  transition-duration: 0.4s;

}

.button:hover {

  background: tomato; 

  color: white;

}

 

결과보기

※ 버튼허버: transition-duration 속성 및 :hover 선택자 이용.

 

버튼 그림자/음영 (Shadow Button)

 

.button1 {

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}


.button2:hover {

  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

 

결과보기

※ 버튼그림자 : box-shadow 속성 이용.

 

버튼 비활성화/클릭방지 (Disabled Button)

 

.disabled {

  opacity: 0.6;

  cursor: not-allowed;

}

 

결과보기

버튼클릭방지: cursor:not-allowed 속성(값) 이용.

 

버튼 그룹 수평 배치 - 왼쪽 배치

 

<style>

.btn-group button {

  background-color: blue;

  border: 1px solid silver;

  color: white;

  padding: 10px 24px;

  cursor: pointer;

  float: left;

}


/* Clear floats (clearfix hack) */

.btn-group:after {

  content: "";

  clear: both;

  display: table;

}


/* 테두리중복제거*/

.btn-group button:not(:last-child) {

  border-right: none;

}


.btn-group button:hover {

  background-color: tomato;

}

</style>


<div class="btn-group">

  <button>HTML</button>

  <button>CSS</button>

  <button>JS</button>

</div>

 

결과보기

※ 버튼그룹: 각 버튼 요소의 margin 제거 후, float:left 속성 추가.

※ 버튼 테두리는 border 속성 이용.

※ padding으로 버튼크기 조절 시, (한글메뉴, 영어메뉴) 높이가 안 맞는 문제 생김. height값 꼭 줄 것.

 

버튼 그룹 수평 배치 - 균등 배분

 

<style>

.btn-group button {

  background-color:blue; 

  border: 1px solid gray; 

  color: white; 

  padding: 10px 24px;

  cursor: pointer;

  float: left;

}


/* Clear floats (clearfix hack) */

.btn-group:after {

  content: "";

  clear: both;

  display: table;

}


.btn-group button:not(:last-child) {

  border-right: none;

}


.btn-group button:hover {

  background-color: tomato;

}


.a,.b,c {width:100%}

.a button {width:50%}

.b button {width:33.33%}

.c button {width:25%}

</style>


<h1>Justified Button Group</h1>


<p>2개 버튼</p>

<div class="btn-group a">

  <button>HTML</button>

  <button>CSS</button>

</div>


<p>3개 버튼</p>

<div class="btn-group b">

  <button>HTML</button>

  <button>CSS</button>

  <button>JS</button>

</div>


<p>4개 버튼</p>

<div class="btn-group c">

  <button>HTML</button>

  <button>CSS</button>

  <button>JS</button>

  <button>JQ</button>

</div>

 

결과보기

 

버튼 그룹 수직 배치

 

.btn-group .button {

  display: block;

}

.btn-group .button:not(:last-child) {

  border-bottom: none; /* 테두리중복제거 */

}

 

결과보기

※ 각 버튼 요소에서 float:left 속성 제거 후, display:block 속성 추가.

 

버튼 이미지 위에 배치 (Button on Image)

 

<style>

.container {

  position: relative;

  width: 100%;

  max-width: 400px;

  margin:0 auto;

}


.container img {

  width: 100%;

  height: auto;

}


.container .btn {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  background-color: #f1f1f1;

  color: black;

  font-size: 16px;

  padding: 16px 30px;

  border: none;

  cursor: pointer;

  border-radius: 5px;

  text-align: center;

}


.container .btn:hover {

  background-color: black;

  color: white;

}

</style>


<div class="container">

  <img src="https://source.unsplash.com/random" alt="이미지">

  <button class="btn">홈짱닷컴 Homzzang.com</button>

</div>

 

결과보기

 

버튼 허버 시 서브요소 노출 (Arrow Effect)

 

<style>

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: blue;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

  vertical-align:middle;

}


.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}


.button span:after {

  content: '\00bb';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}


.button:hover span {

  padding-right: 25px;

}


.button:hover span:after {

  opacity: 1;

  right: 0;

}

</style>


<button class="button"><span>클릭 </span></button>

 

결과보기

 

버튼 허버/클릭 시 배경색 변경

 

<style>

.button {

  display: inline-block;

  padding: 15px 25px;

  font-size: 24px;

  cursor: pointer;

  text-align: center;

  text-decoration: none;

  outline: none;

  color: #fff;

  background-color: blue;

  border: none;

  border-radius: 15px;

  box-shadow: 0 9px #999;

}


.button:hover {background-color: tomato}


.button:active {

  background-color: #3e8e41;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

}

</style>


<button class="button">홈짱닷컴 Homzzang.com</button>

 

결과보기

 

버튼 서서히 진하게/흐르게 (Fade in Effect)

 

.button {

  opacity: 0.6;

  transition: 0.3s;

}

.button:hover {opacity: 1}

 

결과보기

※ 서서히진하게 (=서서히흐리게) : opacity 속성 이용

 

버튼 클릭 시 잔물결 효과 (Wave Effect)

 

<style>

.button {

  position: relative;

  background-color: blue;

  border: none;

  font-size: 28px;

  color: #FFFFFF;

  padding: 20px;

  width: 200px;

  text-align: center;

  -webkit-transition-duration: 0.4s; /* Safari */

  transition-duration: 0.4s;

  text-decoration: none;

  overflow: hidden;

  cursor: pointer;

}


.button:after {

  content: "";

  background: #f1f1f1;

  display: block;

  position: absolute;

  padding-top: 300%;

  padding-left: 350%;

  margin-left: -20px !important;

  margin-top: -120%;

  opacity: 0;

  transition: all 0.8s

}


.button:active:after {

  padding: 0;

  margin: 0;

  opacity: 1;

  transition: 0s

}

</style>


<button class="button">여기 Click</button>

 

결과보기



찾아주셔서 감사합니다. Since 2012