การใช้ Class Button ในภาษา HTML
การเรียกใช้คลาส button
Produces ThisCODE
HELLO ITOPPLUS
<div class="botton_width">
<div class="botton_itopplus"> HELLO ITOPPLUS </div>
</div>

.bottom_width {
width: 38%;
margin: 0 auto;
display: block;
padding: 10px;
}

.botton_itopplus {
text-align: center;
background-color: #78e65b;
padding: 10px;
border: 2px solid #3aa61b;
color: #fff;
cursor: pointer;
}


การเปลี่ยนสีปุ่ม button (background-color)
Produces ThisCODE
HELLO ITOPPLUS
.botton_itopplus { background-color: #000; }
HELLO ITOPPLUS
.botton_itopplus { background-color: #cb2727; }


การเพิ่มเงา (box-shadow)
Produces ThisCODE
HELLO ITOPPLUS
box-shadow: 2px 2px 2px 0px #000;

.botton_itopplus {
text-align: center;
background-color: #78e65b;
padding: 10px;
border: 2px solid #3aa61b;
color: #fff;
cursor: pointer;
box-shadow: 2px 2px 2px 0px #000;
}
HELLO ITOPPLUS
box-shadow: 2px 2px 2px 0px #d3c73e


การไล่สี (background-gradient)
Produces ThisCODE
HELLO ITOPPLUS
background-image:linear-gradient(to bottom right, #ff0000, #ffff00);

.botton_itopplus {
text-align: center;
background-image:linear-gradient(to bottom right, #ff0000, #ffff00);
padding: 10px;
border: 2px solid #3aa61b;
color: #fff;
cursor: pointer;
box-shadow: 2px 2px 2px 0px #000;
}
HELLO ITOPPLUS
background-image: linear-gradient(to bottom right, #66d645, #ffff00);


ปรับขอบ (border-radius)
Produces ThisCODE
HELLO ITOPPLUS
border-radius: 10px 10px 10px 10px;

.botton_itopplus {
text-align: center;
background-color: #78e65b;
padding: 10px;
border: 2px solid #3aa61b;
color: #fff;
cursor: pointer;
border-radius: 10px 10px 10px 10px;
}


การเพิ่ม effect button
Produces ThisCODE
HELLO ITOPPLUS
transition: 0.32s;

.botton_itopplus {
transition: 0.32s;
background-color: #78e65b;
}

.botton_itopplus:hover {
background-color:#000
}
HELLO ITOPPLUS
transition: 0.32s;

.botton_itopplus {
transition: 0.32s;
}

.botton_itopplus:hover {
box-shadow: 1px 1px 2px 2px #0000003b;
}
HELLO ITOPPLUS
transition: 0.32s;

.botton_itopplus {
transition: 0.32s;
}

.botton_itopplus:hover {
border-radius: 10px;
}
HELLO ITOPPLUS
transition: 0.32s;

.botton_itopplus {
transition: 0.32s;
}

.botton_itopplus:hover {
transform: scale(1.05,1.05);
border-radius: 5px;
background-image: linear-gradient(to bottom right, #ff0000, #ffff00);
box-shadow: 2px 2px 2px 1px #0000006b;
}


link button
Produces ThisCODE
HELLO ITOPPLUS
<a href=" (Link) " target="_blank">
  <div class="botton_width">
 <div class="botton_itopplus"> HELLO ITOPPLUS </div>
  </div>
</a>