Hướng dẫn tạo CSS Button transitions có hiệu ứng rê chuột đẹp

views

A+A-

PrintEmail

LaiXe.Xyz xin phép được chia sẻ hướng dẫn tạo các button sử dụng Css transitions khi rê chuột đẹp mắt đến các bạn nhé. Cùng đọc và tham khảo cách thực hiện thông qua bài viết này

Button #01

Button #02

Button #03

Button #04

Button #05

Button #06

Button #07

Button #08

Button #09

Button #10

Button #11

Button #12

Button #13

Button #14

Button #15

Button #16

Button #17

Button #18

Button #19

CSS cho Button #01

Button #01

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v1">
  <span class="lbl">Button #01</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V1 */
.button.v1:hover .icon:before,.button.v1:hover .icon:after {
  width: 35px;
}
.button.v1:hover .icon span:before,.button.v1:hover .icon span:after {
  height: 35px;
}
.button.v1 .lbl {
  padding: 10px 22px;
}
.button.v1 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
}
.button.v1 .icon:before,.button.v1 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v1 .icon:before {
  left: 0;
  top: 0;
}
.button.v1 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v1 .icon span:before,.button.v1 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v1 .icon span:before {
  left: 0;
  top: 0;
}
.button.v1 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #02

Button #02

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v2">
  <span class="lbl">Button #02</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V2 */
.button.v2:hover .icon:before, .button.v2:hover .icon:after {
  width: 10px;
}
.button.v2:hover .icon span:before, .button.v2:hover .icon span:after {
  height: 10px;
}
.button.v2 .lbl {
  padding: 10px 22px;
}
.button.v2 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
}
.button.v2 .icon:before, .button.v2 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v2 .icon:before {
  left: 0;
  top: 0;
}
.button.v2 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v2 .icon span:before, .button.v2 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v2 .icon span:before {
  left: 0;
  top: 0;
}
.button.v2 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #03

Button #03

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v3">
  <span class="lbl">Button #03</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V3 */
.button.v3:hover .icon:before, .button.v3:hover .icon:after {
  width: 20px;
}
.button.v3:hover .icon span:before, .button.v3:hover .icon span:after {
  height: 20px;
}
.button.v3 .lbl {
  padding: 10px 22px;
}
.button.v3 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.button.v3 .icon:before, .button.v3 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v3 .icon:before {
  left: 0;
  top: 0;
}
.button.v3 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v3 .icon span:before, .button.v3 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v3 .icon span:before {
  left: 0;
  top: 0;
}
.button.v3 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #04

Button #04

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v4">
  <span class="lbl">Button #04</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V4 */
.button.v4:hover .icon {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
.button.v4:hover .icon:before, .button.v4:hover .icon:after {
  width: 100%;
}
.button.v4:hover .icon span:before, .button.v4:hover .icon span:after {
  height: 100%;
}
.button.v4 .lbl {
  padding: 10px 22px;
}
.button.v4 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.button.v4 .icon:before, .button.v4 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v4 .icon:before {
  left: 0;
  top: 0;
}
.button.v4 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v4 .icon span:before, .button.v4 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v4 .icon span:before {
  left: 0;
  top: 0;
}
.button.v4 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #05

Button #05

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v5">
  <span class="lbl">Button #05</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V5 */
.button.v5:hover .icon {
  -webkit-transform: scale(0.9) skew(-40deg, 0deg);
          transform: scale(0.9) skew(-40deg, 0deg);
}
.button.v5:hover .icon:before, .button.v5:hover .icon:after {
  width: 100%;
}
.button.v5:hover .icon span:before, .button.v5:hover .icon span:after {
  height: 100%;
}
.button.v5 .lbl {
  padding: 10px 22px;
}
.button.v5 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.button.v5 .icon:before, .button.v5 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v5 .icon:before {
  left: 0;
  top: 0;
}
.button.v5 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v5 .icon span:before, .button.v5 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v5 .icon span:before {
  left: 0;
  top: 0;
}
.button.v5 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #06

Button #06

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v6">
  <span class="lbl">Button #06</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V6 */
.button.v6:hover .icon {
  -webkit-transform: scale(1.1) skew(-40deg, 0deg);
          transform: scale(1.1) skew(-40deg, 0deg);
}
.button.v6:hover .icon:before, .button.v6:hover .icon:after {
  width: 100%;
}
.button.v6:hover .icon span:before, .button.v6:hover .icon span:after {
  height: 100%;
}
.button.v6 .lbl {
  padding: 10px 22px;
}
.button.v6 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.button.v6 .icon:before, .button.v6 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.button.v6 .icon:before {
  left: 0;
  top: 0;
}
.button.v6 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v6 .icon span:before, .button.v6 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.button.v6 .icon span:before {
  left: 0;
  top: 0;
}
.button.v6 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #07

Button #07

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v7">
  <span class="lbl">Button #07</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V7 */
.button.v7:hover .icon {
  -webkit-transform: scale(1.1) skew(-40deg, 0deg);
          transform: scale(1.1) skew(-40deg, 0deg);
}
.button.v7:hover .icon:before, .button.v7:hover .icon:after {
  width: 100%;
}
.button.v7:hover .icon span:before, .button.v7:hover .icon span:after {
  height: 100%;
}
.button.v7 .lbl {
  padding: 10px 22px;
}
.button.v7 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v7 .icon:before, .button.v7 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}
.button.v7 .icon:before {
  left: 0;
  top: 0;
}
.button.v7 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v7 .icon span:before, .button.v7 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
}
.button.v7 .icon span:before {
  left: 0;
  top: 0;
}
.button.v7 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #08

Button #08

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v8">
  <span class="lbl">Button #08</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V8 */
.button.v8:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v8:hover .icon:before, .button.v8:hover .icon:after {
  width: 100%;
}
.button.v8:hover .icon span:before, .button.v8:hover .icon span:after {
  height: 100%;
}
.button.v8 .lbl {
  padding: 10px 22px;
}
.button.v8 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v8 .icon:before, .button.v8 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
}
.button.v8 .icon:before {
  left: 0;
  top: 0;
}
.button.v8 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v8 .icon span:before, .button.v8 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
}
.button.v8 .icon span:before {
  left: 0;
  top: 0;
}
.button.v8 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #09

Button #09

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v9">
  <span class="lbl">Button #09</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V9 */
.button.v9:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v9:hover .icon:before, .button.v9:hover .icon:after {
  width: 100%;
}
.button.v9:hover .icon span:before, .button.v9:hover .icon span:after {
  height: 100%;
}
.button.v9 .lbl {
  padding: 10px 22px;
}
.button.v9 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v9 .icon:before, .button.v9 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v9 .icon:before {
  left: 0;
  top: 0;
}
.button.v9 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v9 .icon span:before, .button.v9 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v9 .icon span:before {
  left: 0;
  top: 0;
}
.button.v9 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #10

Button #10

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v10">
  <span class="lbl">Button #10</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V10 */
.button.v10:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v10:hover .icon:before {
  width: 0;
}
.button.v10:hover .icon:after {
  width: 100%;
}
.button.v10:hover .icon span:before, .button.v10:hover .icon span:after {
  height: 0;
}
.button.v10 .lbl {
  padding: 10px 22px;
}
.button.v10 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v10 .icon:before, .button.v10 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: width 0.2s;
  transition: width 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v10 .icon:before {
  left: 0;
  top: 0;
}
.button.v10 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v10 .icon span:before, .button.v10 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: height 0.2s;
  transition: height 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v10 .icon span:before {
  left: 0;
  top: 0;
}
.button.v10 .icon span:after {
  right: 0;
  bottom: 0;
}
.button.v10:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v10:hover .icon:before {
  width: 0;
}
.button.v10:hover .icon:after {
  width: 50%;
  right: 25%;
}
.button.v10:hover .icon span:before, .button.v10:hover .icon span:after {
  height: 0;
}
.button.v10 .lbl {
  padding: 10px 22px;
}
.button.v10 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v10 .icon:before, .button.v10 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v10 .icon:before {
  left: 0;
  top: 0;
}
.button.v10 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v10 .icon span:before, .button.v10 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v10 .icon span:before {
  left: 0;
  top: 0;
}
.button.v10 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #11

Button #11

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v11">
  <span class="lbl">Button #11</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V11 */
.button.v11:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v11:hover .icon:before, .button.v11:hover .icon:after {
  width: 60px;
}
.button.v11:hover .icon:before {
  left: calc(50% - 30px);
}
.button.v11:hover .icon:after {
  right: calc(50% - 30px);
}
.button.v11:hover .icon span:before, .button.v11:hover .icon span:after {
  height: 0;
}
.button.v11 .lbl {
  padding: 10px 22px;
}
.button.v11 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v11 .icon:before, .button.v11 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.button.v11 .icon:before {
  left: 0;
  top: 0;
}
.button.v11 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v11 .icon span:before, .button.v11 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v11 .icon span:before {
  left: 0;
  top: 0;
}
.button.v11 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #12

Button #12

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v12">
  <span class="lbl">Button #12</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V12 */
.button.v12:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v12:hover .icon:before, .button.v12:hover .icon:after {
  width: 60px;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.button.v12:hover .icon:before {
  left: calc(50% - 30px);
}
.button.v12:hover .icon:after {
  right: calc(50% - 30px);
}
.button.v12:hover .icon span:before, .button.v12:hover .icon span:after {
  height: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v12 .lbl {
  padding: 10px 22px;
}
.button.v12 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v12 .icon:before, .button.v12 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v12 .icon:before {
  left: 0;
  top: 0;
}
.button.v12 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v12 .icon span:before, .button.v12 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.button.v12 .icon span:before {
  left: 0;
  top: 0;
}
.button.v12 .icon span:after {
  right: 0;
  bottom: 0;
}
.button.v13:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}

CSS cho Button #13

Button #13

Hướng dẫn tạo Button này như sau
Code HTML

<div class="button v13">
  <span class="lbl">Button #13</span>
  <span class="icon">
     <span></span>
  </span>
</div>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V13 */
.button.v13:hover .icon:before, .button.v13:hover .icon:after {
  width: 60px;
}
.button.v13:hover .icon:before {
  left: calc(50% - 30px);
}
.button.v13:hover .icon:after {
  right: calc(50% - 30px);
}
.button.v13:hover .icon span:before, .button.v13:hover .icon span:after {
  height: calc(100% - 20px);
}
.button.v13:hover .icon span:before {
  top: 10px;
}
.button.v13:hover .icon span:after {
  bottom: 10px;
}
.button.v13 .lbl {
  padding: 10px 22px;
}
.button.v13 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v13 .icon:before, .button.v13 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v13 .icon:before {
  left: 0;
  top: 0;
}
.button.v13 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v13 .icon span:before, .button.v13 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v13 .icon span:before {
  left: 0;
  top: 0;
}
.button.v13 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #14

Button #14

Hướng dẫn tạo Button này như sau
Code HTML

<section class="button-container">
   <div class="container">
      <div class="button v14">
         <span class="lbl">Button #14</span>
         <span class="icon">
         <span></span> 
         </span>
      </div>
   </div>
</section>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V14 */
.button.v14:hover .icon:before, .button.v14:hover .icon:after {
  width: 100%;
}
.button.v14:hover .icon span:before, .button.v14:hover .icon span:after {
  height: 100%;
}
.button.v14:hover .icon2 {
  -webkit-transform: skew(-40deg, 0deg) scaleX(1);
          transform: skew(-40deg, 0deg) scaleX(1);
  background: #f0202f;
  z-index: -1;
}
.button.v14 .lbl {
  padding: 10px 22px;
}
.button.v14 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg) scaleX(0.2);
          transform: skew(-40deg, 0deg) scaleX(0.2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v14 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v14 .icon:before, .button.v14 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v14 .icon:before {
  left: 0;
  top: 0;
}
.button.v14 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v14 .icon span:before, .button.v14 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v14 .icon span:before {
  left: 0;
  top: 0;
}
.button.v14 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #15

Button #15

Hướng dẫn tạo Button này như sau
Code HTML

<section class="button-container">
   <div class="container">
      <div class="button v15">
         <span class="lbl">Button #15</span>
         <span class="icon">
         <span></span>
         </span>
         <span class="icon2"></span>
      </div>
   </div>
</section>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V15 */
.button.v15:hover .icon:before, .button.v15:hover .icon:after {
  width: 100%;
}
.button.v15:hover .icon span:before, .button.v15:hover .icon span:after {
  height: 100%;
}
.button.v15:hover .icon2 {
  -webkit-transform: skew(-40deg, 0deg) scale(1);
          transform: skew(-40deg, 0deg) scale(1);
  background: #f0202f;
  z-index: -1;
}
.button.v15 .lbl {
  padding: 10px 22px;
}
.button.v15 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg) scaleX(0.2) scaleY(0.5);
          transform: skew(-40deg, 0deg) scaleX(0.2) scaleY(0.5);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v15 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v15 .icon:before, .button.v15 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v15 .icon:before {
  left: 0;
  top: 0;
}
.button.v15 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v15 .icon span:before, .button.v15 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.button.v15 .icon span:before {
  left: 0;
  top: 0;
}
.button.v15 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #16

Button #16

Hướng dẫn tạo Button này như sau
Code HTML

<section class="button-container">
   <div class="container">
      <div class="button v16">
         <span class="lbl">Button #16</span>
         <span class="icon">
         <span></span>
         </span>
         <span class="icon2">
         </span>
      </div>
   </div>
</section>

Thêm Css

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V16 */
.button.v16:hover .icon {
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
}
.button.v16:hover .icon:before, .button.v16:hover .icon:after {
  width: 60px;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.button.v16:hover .icon:before {
  left: calc(50% - 30px);
}
.button.v16:hover .icon:after {
  right: calc(50% - 30px);
}
.button.v16:hover .icon span:before, .button.v16:hover .icon span:after {
  height: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v16:hover .icon2 {
  -webkit-transform: skew(-40deg, 0deg) scaleX(1);
          transform: skew(-40deg, 0deg) scaleX(1);
  background: #f0202f;
  z-index: -1;
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.button.v16 .lbl {
  padding: 10px 22px;
}
.button.v16 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg) scaleX(0.2);
          transform: skew(-40deg, 0deg) scaleX(0.2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v16 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.button.v16 .icon:before, .button.v16 .icon:after {
  content: '';
  height: 1px;
  width: 30px;
  position: absolute;
  display: block;
  background: #f0202f;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v16 .icon:before {
  left: 0;
  top: 0;
}
.button.v16 .icon:after {
  right: 0;
  bottom: 0;
}
.button.v16 .icon span:before, .button.v16 .icon span:after {
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  height: 30px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.button.v16 .icon span:before {
  left: 0;
  top: 0;
}
.button.v16 .icon span:after {
  right: 0;
  bottom: 0;
}

CSS cho Button #17, #18, #19

Button #17

Button #18

Button #19

Hướng dẫn tạo Button này như sau
Code HTML cho Button #17

<div class="button v17">
   <span class="lbl">Button #17</span>
   <span class="icon">
   <span></span>
   </span>
   <span class="icon2">
   </span>
</div>

Code HTML cho Button #18

<div class="button v17 white labelgray">
   <span class="lbl">Button #18</span>
   <span class="icon">
   <span></span>
   </span>
   <span class="icon2">
   </span>
</div>

Code HTML cho Button #19

<div class="button v17 transparent">
   <span class="lbl">Button #19</span>
   <span class="icon">
   <span></span>
   </span>
   <span class="icon2">
   </span>
</div>

Thêm Css chung cho 3 button này

section.button-container, {
  display: inline-block;
  width: 100%;
}
section.button-container .container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  display: block;
  float: left;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.button {
  margin: 20px;
  float: left;
  position: relative;
  font-family: arial;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
.button .lbl {
  padding: 10px;
  display: inline-block;
  color:#000
}
/* Button V17 */
.button.v17 .lbl {
  padding: 10px 30px;
  font-family: arial;
  font-size: 14px;
  display: inline-block;
  z-index: 10;
  position: relative;
  white-space: nowrap;
  line-height: 24px;
  -webkit-transition: all 0.225s;
  transition: all 0.225s;
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
  letter-spacing: 2px;
}
.button.v17.button-start .lbl {
  padding: 12px 65px;
}
.button.v17 .icon2 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.225s;
  transition: all 0.225s;
  -webkit-transform: skew(-40deg, 0deg) scaleX(1);
          transform: skew(-40deg, 0deg) scaleX(1);
  background: rgba(240, 32, 47, 0.8);
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.button.v17 .icon {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.225s;
  transition: all 0.225s;
  -webkit-transform: scale(0.9) skew(0deg, 0deg);
          transform: scale(0.9) skew(0deg, 0deg);
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.button.v17 .icon:before, .button.v17 .icon:after {
  width: 60px;
  opacity: 0;
  content: '';
  height: 1px;
  position: absolute;
  display: block;
  background: #000;
  -webkit-transition: all 0.375s;
  transition: all 0.375s;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.button.v17 .icon:before {
  top: 0;
  left: calc(50% - 30px);
}
.button.v17 .icon:after {
  bottom: 0;
  right: calc(50% - 30px);
}
.button.v17 .icon span:before, .button.v17 .icon span:after {
  height: 0;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  content: '';
  background: #f0202f;
  position: absolute;
  display: block;
  width: 2px;
  -webkit-transition: all 0.225s;
  transition: all 0.225s;
}
.button.v17 .icon span:before {
  left: 0;
  top: 0;
}
.button.v17 .icon span:after {
  right: 0;
  bottom: 0;
}
.button.v17:hover .icon {
  -webkit-transform: skew(-40deg, 0deg);
          transform: skew(-40deg, 0deg);
}
.button.v17:hover .icon:before, .button.v17:hover .icon:after {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  width: 30px;
  opacity: 1;
}
.button.v17:hover .icon:before {
  left: 0;
}
.button.v17:hover .icon:after {
  right: 0;
}
.button.v17:hover .icon span:before, .button.v17:hover .icon span:after {
  height: 30px;
  -webkit-transition-delay: 0.45s;
          transition-delay: 0.45s;
}
.button.v17:hover .icon2 {
  -webkit-transform: skew(-40deg, 0deg) scaleX(0.2);
          transform: skew(-40deg, 0deg) scaleX(0.2);
  background: transparent;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  opacity: 0;
}
.button.v17.white:hover .lbl {
  color: #fa1958;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v17.white .icon2 {
  background: #d0c3c3;
}
.button.v17.white .icon:before, .button.v17.white .icon:after {
  background: #f34c58;
}
.button.v17.white .icon span:before, .button.v17.white .icon span:after {
  background: #f34c58;
}
.button.v17.lblred .lbl {
  color: #f0202f;
}
.button.v17.lblgray .lbl {
  color: #1D1D1D;
}
.button.v17.transparent {
  float: none;
  display: inline-block;
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
}
.button.v17.transparent .lbl {
  color: #000;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.button.v17.transparent .icon2 {
  background: transparent;
}
.button.v17.transparent .icon {
  -webkit-transform: scale(1) skew(10deg, 0deg);
          transform: scale(1) skew(10deg, 0deg);
}
.button.v17.transparent .icon:before, .button.v17.transparent .icon:after {
  background: #000;
}
.button.v17.transparent .icon span:before, .button.v17.transparent .icon span:after {
  background: #000;
}
.button.v17.transparent:hover .icon {
  -webkit-transform: scale(1) skew(-40deg, 0deg);
          transform: scale(1) skew(-40deg, 0deg);
}

Chúc các bạn thực hiện thành công để tạo ra những button có hiệu ứng hover đẹp như trong bài viết này nhé !
Nếu các bạn thấy đây là một bài viết hay và có ích, xin hãy cho 1 like hoặc chia sẻ. Xin cảm ơn rất nhiều

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Hướng dẫn Tạo button css Thiết kế website