Một số hiệu ứng hover sử dụng CSS 3 (Phần 1)

Trước đây, khi code những hiệu ứng đẹp mắt cho website của mình, bạn phải dùng đến những thư viện jQuery cồng kềnh. Sự ra đời của CSS3 sẽ giúp chúng ta dễ dàng tạo ra những hiệu ứng đẹp mắt, tương thích tốt với các trình duyệt tiên tiến hiện nay. Trong bài này tôi sẽ giới thiệu với các bạn một vài hiệu ứng hover sử dụng CSS3.

Mình sẽ sử dụng hình ảnh này để làm demo

Code HTML:

<a href="#" id="so1"></a>
<a href="#" id="so2"></a>

Code CSS:

Hiệu ứng 1:

a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmihPE3OksMzjjG1QcmiYB767rA4bsb47lNc34KRemoHcRe6gmsVJGsBVAp3iYHnE9GsVpvnVaHQodv2IGn6DQnrfPyplTXMapwo56qef9Mv0dCisdzk7b15WmWUJ9UMcO2TmBmfD0w4/s1600/css3_logo_wide.png') 50% 50% no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-origin:border-box;
    display:block;
    float:left;
    width:150px;
    height:150px;
    border-width:50px;
    border-color: rgba(0,0,0,0);
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}
a:hover{
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}
#so1{
        border-style:solid;
}
#so2{
        border-style:dotted;
}
 

Xem demo

Hiệu ứng 2:

a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmihPE3OksMzjjG1QcmiYB767rA4bsb47lNc34KRemoHcRe6gmsVJGsBVAp3iYHnE9GsVpvnVaHQodv2IGn6DQnrfPyplTXMapwo56qef9Mv0dCisdzk7b15WmWUJ9UMcO2TmBmfD0w4/s1600/css3_logo_wide.png') 50% 50% no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-origin:border-box;
    display:block;
    float:left;
    width:150px;
    height:150px;
    border-width:50px;
    border-color: rgba(0,0,0,0);
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}
a:hover{
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}
#so1{
    border:75px solid rgba(0,0,0,0.5);
}
#so1:hover{
    border:1px solid rgba(0,0,0,0.7);
}
#so2{
    border:75px dotted rgba(0,0,0,0.5);
}
#so2:hover{
    border:1px dotted rgba(0,0,0,0.7);
}
  

Xem demo

Hiệu ứng 3:

a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBmihPE3OksMzjjG1QcmiYB767rA4bsb47lNc34KRemoHcRe6gmsVJGsBVAp3iYHnE9GsVpvnVaHQodv2IGn6DQnrfPyplTXMapwo56qef9Mv0dCisdzk7b15WmWUJ9UMcO2TmBmfD0w4/s1600/css3_logo_wide.png') 50% 50% no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
    -moz-background-size:100%;
    background-origin:border-box;
    display:block;
    float:left;
    width:150px;
    height:150px;
    margin:10px;
    border-width:50px;
    border-color: rgba(0,0,0,0);
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
}
a:hover{
    border-width:0;
    border-color:rgba(0,0,0,0.5);
}

#so1{
    border:75px solid rgba(0,0,0,0.5);
}
#so1:hover{
    border:1px solid rgba(0,0,0,0.7);
}
#so2{
    border:75px dotted rgba(0,0,0,0.5);
}
#so2:hover{
    border:1px dotted rgba(0,0,0,0.7);
}
#so3{
    border:75px dashed rgba(0,0,0,0.5);
}
#so3:hover{
    border:1px dashed rgba(0,0,0,0.7);
}

Xem demo