버튼모음

w3s

 

 

Remember to clear floats after, or else will this p element also float next to the buttons.

 

 

 

<style>
.buttona {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
.button6 {border-radius: 12px;}
.button7 {border-radius: 50%;}

  
 .w3stemp {


  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;


}
  
 .w3stemp{
   transition-duration: 0.4s;
  }
  
.w3stemp:hover {
  background-color: white;
  color: black;
}
  
  .disabled {
  opacity: 0.6;
  cursor: not-allowed;
  }
  
.long {
  float: left;
  border: 1px solid green;
}
  
  .down {
  display: block;
}
    
  .btn-group1 .buttonb {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  width: 150px;
  display: block;
}

.btn-group1 .buttonb:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

.btn-group1 .buttonb:hover {
  background-color: #3e8e41;
}
  
  
  .btn-groupc .buttonc {
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}

.btn-groupc .buttonc:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-groupc .buttonc:hover {
  background-color: #3e8e41;
}
  
  
  
  
  
  
</style>

<p data-ke-size="size16">w3s</p>
<p data-ke-size="size16">&nbsp;</p>
<p data-ke-size="size16">&nbsp;</p>
<div><button> 기본 </button><button class="w3s"> w3s </button></div>
<div>
<button class="buttona button1">10px</button>
<button class="buttona button2">12px</button>
<button class="buttona button3">16px</button>
<button class="buttona button4">20px</button>
<button class="buttona button5">24px</button>

<button class="buttona button6">12345</button>
<button class="buttona button7">12345</button>
</div>

<div>
  <button class="w3stemp"> w3s </button>
 
  </div>

<div class="btn-group1">
  <button class="buttonb">Button</button>
  <button class="buttonb">Button</button>
  <button class="buttonb">Button</button>
  <button class="buttonb">Button</button>
</div>


<div class="btn-groupc">
  <button class="buttonc">Button</button>
  <button class="buttonc">Button</button>
  <button class="buttonc">Button</button>
  <button class="buttonc">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element also float next to the buttons.</p>