Hiệu ứng Hover siêu đẹp cho CSS3 button

933
18-05-2020
Hiệu ứng Hover siêu đẹp cho CSS3 button

Bizfly Cloud sẽ giới thiệu tới bạn danh sách những hiệu ứng Hover siêu đẹp và khá đơn giản mà bạn có thể áp dụng cho các button trên trang web. Sử dụng những mẫu button được tạo ra bằng hiệu ứng Hover sẽ làm cho trang web của bạn càng sinh động và thu hút người truy cập hơn.

    Buttons cách điệu với hiệu ứng Direction hover

Hiệu ứng Direction hover giúp bạn thổi hồn cho button đơn giản thêm sinh động nhờ sự chuyển động của nền chữ và viền button. 

Ví dụ: 

Hiệu ứng Hover siêu đẹp cho CSS3 button - Ảnh 1.

 HTML: 

<div class="btn from-top">From Top</div>

<div class="btn from-left">From Left</div>

<div class="btn from-right">From Right</div>

<div class="btn from-center">From Center</div>

<div class="btn from-bottom">From Bottom</div>

CSS: 

/* ~~~~~~~ INIT. BTN ~~~~~~~ */

.btn {

position: relative;

padding: 1.4rem 4.2rem;

padding-right: 3.1rem;

font-size: 1.4rem;

color: var(--inv);

letter-spacing: 1.1rem;

text-transform: uppercase;

transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);

cursor: pointer;

user-select: none;

}

.btn:before, .btn:after {

content: '';

position: absolute;

transition: inherit;

z-index: -1;

}

.btn:hover {

color: var(--def);

transition-delay: .5s;

}

.btn:hover:before {

transition-delay: 0s;

}

.btn:hover:after {

background: var(--inv);

transition-delay: .35s;

}

/* From Top */

.from-top:before, 

.from-top:after {

left: 0;

height: 0;

width: 100%;

}

.from-top:before {

bottom: 0;

border: 1px solid var(--inv);

border-top: 0;

border-bottom: 0;

}

.from-top:after {

top: 0;

height: 0;

}

.from-top:hover:before,

.from-top:hover:after {

height: 100%;

}

/* From Left */

.from-left:before, 

.from-left:after {

top: 0;

width: 0;

height: 100%;

}

.from-left:before {

right: 0;

border: 1px solid var(--inv);

border-left: 0;

border-right: 0;

}

.from-left:after {

left: 0;

}

.from-left:hover:before,

.from-left:hover:after {

width: 100%;

}

/* From Right */

.from-right:before, 

.from-right:after {

top: 0;

width: 0;

height: 100%;

}

.from-right:before {

left: 0;

border: 1px solid var(--inv);

border-left: 0;

border-right: 0;

}

.from-right:after {

right: 0;

}

.from-right:hover:before,

.from-right:hover:after {

width: 100%;

}

/* From center */

.from-center:before {

top: 0;

left: 50%;

height: 100%;

width: 0;

border: 1px solid var(--inv);

border-left: 0;

border-right: 0;

}

.from-center:after {

bottom: 0;

left: 0;

height: 0;

width: 100%;

background: var(--inv);

}

.from-center:hover:before {

left: 0;

width: 100%;

}

.from-center:hover:after {

top: 0;

height: 100%;

}

/* From Bottom */

.from-bottom:before, 

.from-bottom:after {

left: 0;

height: 0;

width: 100%;

}

.from-bottom:before {

top: 0;

border: 1px solid var(--inv);

border-top: 0;

border-bottom: 0;

}

.from-bottom:after {

bottom: 0;

height: 0;

}

.from-bottom:hover:before,

.from-bottom:hover:after {

height: 100%;

}

/* ~~~~~~~~~~~~ GLOBAL SETTINGS ~~~~~~~~~~~~ */

*, *:before, *:after {

box-sizing: border-box;

}

body {

--def: #96B7C4;

--inv: #fff;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

height: 100vh;

width: 100%;

background-image: linear-gradient(-25deg, #616161 0%, #96B7C4 100%);

}

html {

font-size: 12px;

font-family: 'Playfair Display', serif;

}

div {margin-bottom: 3rem;}

div:last-child {margin-bottom: 0;}

    Hiệu ứng viền chuyển động vòng quanh button

Đây là một hiệu ứng khá là thú vị và đẹp mắt mà bạn có thể sử dụng cho button của mình để làm mới mẻ giao diện của trang web. 

Hiệu ứng Hover siêu đẹp cho CSS3 button - Ảnh 2.

Để có được hiệu ứng như hình trên bạn tham khảo các bước dưới đây. 

HTML

<div id="main">

  <div class="container">

    <div class="row">

      <div class="block col-md-2">

        <a href="#" class="btn btn-1 color-green">

          <svg>

            <rect x="0" y="0" fill="none" width="100%" height="100%"/>

          </svg>

          Hover

        </a>

      </div>

      <div class="block col-md-2">

        <a href="#" class="btn btn-1 color-blue">

          <svg>

            <rect x="0" y="0" fill="none" width="100%" height="100%"/>

          </svg>

          Hover

        </a>

      </div>

    </div>

  </div>

</div>

Phần CSS chung

body {

  background-color: #222;

}

#main {

  margin-top: 200px;

}

.btn {

  color: #fff;

  cursor: pointer;

  display: inline-block;

  font-size:16px;

  font-weight: 400;

  line-height: 36px;

  margin: 0 0 2em;

  max-width: 160px; 

  position: relative;

  text-decoration: none;

  text-transform: uppercase;

  width: 100%; 

}

CSS

.btn-1 {

  font-weight: 100;

  transition: all .25s;

  svg {

    height: 45px;

    left: 0;

    position: absolute;

    top: 0; 

    width: 100%; 

  }

  rect {

    fill: none;

    stroke: #fff;

    stroke-width: 2;

    stroke-dasharray: 422, 0;

      transition-delay: none;

  }

}

.btn-1:hover {

  font-weight: 900;

  letter-spacing: 2px;

  rect {

    stroke-width: 5;

    stroke-dasharray: 15, 310;

    stroke-dashoffset: 48;

    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);

  }

}

.btn-1.color-green:hover {

  color: green;

  rect {

    stroke: green;

  }

}

.btn-1.color-blue:hover {

  color: blue;

  rect {

    stroke: blue;

  }

}

    Hiệu ứng thêm đường kẻ và đổi màu button

Để áp dụng hiệu ứng này thì bạn cần hiểu và biết cách sử dụng :before và :after một cách thành thạo.

Ví dụ minh họa: 

HTML

<div id="main">

  <div class="container">

    <div class="row">

      <div class="block col-md-2">

        <a href="#" class="btn btn-2 color-green">

          Hover

        </a>

      </div>

      <div class="block col-md-2">

        <a href="#" class="btn btn-2 color-blue">

          Hover

        </a>

      </div>

    </div>

  </div>

</div>

CSS

.btn-2 {

    letter-spacing: 0;

}

.btn-2.color-green:hover,

.btn-2.color-green:active {

  color: green;

}

.btn-2.color-blue:hover,

.btn-2.color-blue:active {

  color: blue;

}

.btn-2:hover,

.btn-2:active {

  letter-spacing: 5px;

}

.btn-2:after,

.btn-2:before {

  backface-visibility: hidden;

  border: 1px solid rgba(#fff, 0);

  bottom: 0px;

  content: " ";

  display: block;

  margin: 0 auto;

  position: relative;

  transition: all 280ms ease-in-out;

  width: 0;

  opacity: 0;

}

.btn-2.color-green:after,

.btn-2.color-green:before {

  border: 1px solid green;

}

.btn-2.color-blue:after,

.btn-2.color-blue:before {

  border: 1px solid blue;

}

.btn-2:hover:after,

.btn-2:hover:before {

  backface-visibility: hidden;

  transition: width 350ms ease-in-out;

  width: 70%;

  opacity: 1;

}

    Hiệu ứng mix-blend-mode button bằng CSS 

Hiệu ứng này giúp các nút bấm có sự phối hợp độc đáo giữa màu sắc, hình khối và con chữ. Đây là một hiệu ứng khá đơn giản nhưng mới mẻ.

Hiệu ứng Hover siêu đẹp cho CSS3 button - Ảnh 3.

Thao tác như sau: 

HTML

.container

button.btn

span.btn-text Hover Me

button.btn.rounded

span.text-green Hover Me

CSS

body,html{

height: 100%;

}

body {

font-family: "Lato", sans-serif;

color: #111;

display: flex;

flex-direction: row;

align-items: center;

align-content: center;

justify-content: center;

background-color: #ECECEC;

}

.container {

width: auto;

display: flex;

flex-direction: column;

//border: 2px solid black;

}

.btn{

margin: 20px auto;

border: none;

padding: 10px 44px;

font-size: 36px;

position: relative;

&::before{

transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);

content: '';

width: 50%;

height: 100%;

background: black;

position: absolute;

top: 0;

left: 0;

}

& .btn-text{

color: white;

// check out mdn docs for different types of blend modes. 

mix-blend-mode: difference;

}

&:hover{

&::before{

background: black;

width: 100%;

}

}

//rounded btn styles

&.rounded{

border-radius:50px;

& .text-green{

color:#00F0B5;

mix-blend-mode: difference;

}

&::before{

border-radius: 50px;

width: 25%;

background: #00F0B5;

}

&:hover{

&::before{

background: #00F0B5;

width: 100%;

}

}

}

}

Tổng kết

Hãy chia sẻ và đóng góp thêm những hiệu ứng Hover thú vị khác các bạn nhé. Hy vọng rằng bạn sẽ luôn đồng hành và ủng hộ những bài viết khác. 

Theo BizFly Cloud tổng hợp

>> Có thể bạn quan tâm: Mẹo cải thiện hiệu suất CSS và JS animation không thể bỏ qua

BizFly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực truyền thông và internet tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những lời khuyên hữu ích và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây.
SHARE