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

1.

버튼 기본스타일 (Basic Button 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> 요소로 제작 가능.

2.

버튼 색깔 (Button Color)

 

<style>

.button {background-color: blue;}

.b {background:red;}

.c {background:green;}

</style>

 

결과보기

※ 버튼색깔: background 속성 이용

3.

버튼 크기 (Button Color)

 

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

 

※ width, height 속성 없이 padding만으로 크기 설정된 경우, font-size , padding 속성 이용.

4.

모서리 둥근 버튼 (Rounded Button)

 

.button {border-radius: 5px;}

.button {border-radius: 50%;}

 

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

5.

버튼 허버 (Button Hover)

 

.button {

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

  transition-duration: 0.4s;

}

.button:hover {

  background: tomato; 

  color: white;

}

 

결과보기

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

6.

버튼 그림자 (= 버튼음영 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 속성 이용.

7.

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

 

.disabled {

  opacity: 0.6;

  cursor: not-allowed;

}

 

결과보기

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

8.

버튼 너비 (= 버튼 크기)

 

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

 

결과보기

※ 버튼너비 : width 속성 이용.

9-1.

버튼 그룹1 (Button Group)

 

<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값 꼭 줄 것.

9-2.

버튼 그룹2 (Button Group) - 균등배분너비버튼

 

<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>

 

결과보기

10.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

수직버튼그룹 (= 버튼수직배치 = 버튼세로나열 Vertical Button Group)

 

 

.btn-group .button {

  display: block;

}

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

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

}

 

결과보기

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

11.

이미지 위 버튼 (= 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>

 

결과보기

12.

애니 버튼 (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: '

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

1.

버튼 기본스타일 (Basic Button 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> 요소로 제작 가능.

 

2.

버튼 색깔 (Button Color)

 

<style>

.button {background-color: blue;}

.b {background:red;}

.c {background:green;}

</style>

 

결과보기

※ 버튼색깔: background 속성 이용

 

3.

버튼 크기 (Button Color)

 

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

 

※ width, height 속성 없이 padding만으로 크기 설정된 경우, font-size , padding 속성 이용.

 

4.

모서리 둥근 버튼 (Rounded Button)

 

.button {border-radius: 5px;}

.button {border-radius: 50%;}

 

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

 

5.

버튼 허버 (Button Hover)

 

.button {

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

  transition-duration: 0.4s;

}

.button:hover {

  background: tomato; 

  color: white;

}

 

결과보기

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

 

6.

버튼 그림자 (= 버튼음영 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 속성 이용.

 

7.

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

 

.disabled {

  opacity: 0.6;

  cursor: not-allowed;

}

 

결과보기

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

 

8.

버튼 너비 (= 버튼 크기)

 

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {width: 100%;}

 

결과보기

※ 버튼너비 : width 속성 이용.

 

9-1.

버튼 그룹1 (Button Group)

 

<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값 꼭 줄 것.

 

 

9-2.

버튼 그룹2 (Button Group) - 균등배분너비버튼

 

<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>

 

결과보기

 

10.

수직버튼그룹 (= 버튼수직배치 = 버튼세로나열 Vertical Button Group)

 

 

.btn-group .button {

  display: block;

}

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

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

}

 

결과보기

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

 

11.

이미지 위 버튼 (= 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>

 

결과보기

 

12.

애니 버튼 (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>

 

결과보기

 

 

12-2.

애니 버튼 (pressed Effect) -  3D버튼 눌림효과

 

<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>

 

결과보기

 

 

12-3.

애니버튼(= Fade in Effect) -  서서히 진하게 / 서서히 흐르게

 

 

 

.button {

  opacity: 0.6;

  transition: 0.3s;

}

.button:hover {opacity: 1}

 

결과보기

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

 

 

12-4.

애니버튼(= Ripple 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>

 

결과보기

 

[출처] https://homzzang.com/b/css-191