Bài 13 - Một số CSS3 hover effect đẹp (Phần 1)

Chào các bạn! Đã khi nào các bạn đau đầu khi phải ngồi mất thời gian suy nghĩ về vấn đề "How to make effect for button?" chưa? Ở đây mình không nói tới những effect đơn giản như: giảm opacity, đổi color, đổi border-color hay đổi màu background mà là những effect phức tạp hơn 1 chút. Sau 1 lần lang thang trên internet, tìm kiếm 1 vài bài viết về effect đẹp được tạo bởi css3, mình đã tìm được 1 bài khá hay về CSS3 hover effect với các effect rất đẹp mắt. Các bạn có thể tham khảo rồi sau đó áp dụng cho code của mình. Do số lượng effect khá nhiều nên mình xin phép được chia thành nhiều phần khác nhau. Bài này, mình sẽ giới thiệu về 4 effect đầu tiên.

Note: Do mình không biết cắt nghĩa và đặt tên cho effect thế nào nên mình chỉ để tên lần lượt là effect 1, effect 2,.. nhé. Mong các bạn thông cảm.

CSS chung

Trước khi đi vào cụ thể từng effect, mình sẽ show những css chung cho các effect này và cả những effect ở các phần sau

body {
    background: #292929;
    padding-left: 30px;
}

.row .block {
    height: 150px;
    margin-top: 100px;
}
.hovicon {
    display: inline-block;
    font-size: 45px;
    line-height: 90px;
    cursor: pointer;
    margin: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
}

.hovicon:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hovicon:before {
    speak: none;
    font-size: 48px;
    line-height: 90px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    display: block;
    -webkit-font-smoothing: antialiased;
}

1. Effect 1

CSS chung cho effect 1

/* Effect 1 */
.hovicon.effect-1 {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.hovicon.effect-1:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
.hovicon.effect-1.color-green:after {
    box-shadow: 0 0 0 4px green;
}
.hovicon.effect-1.color-blue:after {
    box-shadow: 0 0 0 4px blue;
}
.hovicon.effect-1.color-orange:after {
    box-shadow: 0 0 0 4px orange;
}

1.1. Effect 1a

HTML:

<div class="row">
  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-a color-green">10</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-a color-blue">10</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-a color-orange">10</i>
  </div>
</div>

CSS

/* Effect 1a */
.hovicon.effect-1.sub-a.color-green:hover {
    background: green;
    color: #fff;
}

.hovicon.effect-1.sub-a.color-blue:hover {
    background: blue;
    color: #fff;
}

.hovicon.effect-1.sub-a.color-orange:hover {
    background: orange;
    color: #fff;
}
.hovicon.effect-1.sub-a:hover i {
    color: #fff;
}
.hovicon.effect-1.sub-a:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

Result:

1.2. Effect 1b

HTML

<div class="row">
  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-b color-green">1b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-b color-blue">1b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-1 sub-b color-orange">1b</i>
  </div>
</div>

CSS

.hovicon.effect-1.sub-b:hover {
    background: rgba(255, 255, 255, 1);
    color: #41ab6b;
}
.hovicon.effect-1.sub-b.color-green:hover {
    background: green;
    color: #fff;
}

.hovicon.effect-1.sub-b.color-blue:hover {
    background: blue;
    color: #fff;
}

.hovicon.effect-1.sub-b.color-orange:hover {
    background: orange;
    color: #fff;
}
.hovicon.effect-1.sub-b:hover i {
    color: #fff;
}
.hovicon.effect-1.sub-b:after {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
.hovicon.effect-1.sub-b:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

Result

2. Effect 2

CSS chung cho effect 2 như sau

 .hovicon.effect-2 {
    color: #eea303;
    box-shadow: 0 0 0 3px #fff;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}
.hovicon.effect-2.color-green:hover {
    box-shadow: 0 0 0 3px green;
}
.hovicon.effect-2.color-blue:hover {
    box-shadow: 0 0 0 3px blue;
}
.hovicon.effect-2.color-orange:hover {
    box-shadow: 0 0 0 3px orange;
}
.hovicon.effect-2:after {
    top: -2px;
    left: -2px;
    padding: 2px;
    z-index: -1;
    background: #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}

2.1. Effect 2a

HTML

<div class="row">
  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-a color-green">1b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-a color-blue">1b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-a color-orange">1b</i>
  </div>
</div>

CSS

.hovicon.effect-2.sub-a:hover, 
.hovicon.effect-2.sub-a:hover i {
    color: #fff;
}

.hovicon.effect-2.sub-a:hover:after {
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    transform: scale(0.85);
}

.hovicon.effect-2.sub-a.color-green:hover:after {
    background: green;
}
.hovicon.effect-2.sub-a.color-blue:hover:after {
    background: blue;
}
.hovicon.effect-2.sub-a.color-orange:hover:after {
    background: orange;
}

Result

2.2. Effect 2b

HTML

<div class="row">
  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-b color-green">2b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-b color-blue">2b</i>
  </div>

  <div class="block col-md-2">
      <i class="hovicon effect-2 sub-b color-orange">2b</i>
  </div>
</div>

CSS

/* Effect 2b */
 .hovicon.effect-2.sub-b:hover:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.2s;
    -moz-transition: -moz-transform 0.4s, opacity 0.2s;
    transition: transform 0.4s, opacity 0.2s;
}
.hovicon.effect-2.sub-b.color-green:hover, 
.hovicon.effect-2.sub-b.color-green:hover i {
    color: green;
}
.hovicon.effect-2.sub-b.color-blue:hover, 
.hovicon.effect-2.sub-b.color-blue:hover i {
    color: blue;
}
.hovicon.effect-2.sub-b.color-orange:hover, 
.hovicon.effect-2.sub-b.color-orange:hover i {
    color: orange;
}

Result

Như vậy, bài này chúng ta đã biết thêm được 4 loại effect thuộc 2 nhóm khác nhau. Ở bài tiếp theo, mình sẽ tiếp tục giới thiệu những effect khác. Hi vọng các bạn có thể đón nhận những bài viết tương tự như thế này.