Tạo animation cho button bằng CSS

Posted on by mtoplistChuyên mục:Top List

Tạo Animated Buttons

Kiểu 1 (không biết đặt tên :3)

Kiểu thứ nhất là khi chúng ta rê chuột vào button thì nó sẽ hiện lên dấu mũi tên như này: >>. Sau khi tạo một button bằng html:
<button class="button1"><span>Click me bro</span></button>
alt text
Chúng ta đặt span xung quanh text bên trong button với mục đích là chỉ tác động duy nhất lên vùng text ấy và đồng thời đặt class button1 vào button vừa tạo để dựa trên đó viết CSS. Tiếp theo là tiến hành tạo hình cho button bằng CSS:

.button1{
    font-size:20px;
    background:orange;
    padding:1.2em 1.4em;
    border:none;
    margin:5px;
    border-radius:6px;
    transition:0.5s;
}

buttonvới tạo hình ở trên sẽ trông như thế này:
alt text
Ở trên là phần tạo hình cho button (có thể tạo khác đi tùy thuộc vào sở thích chúng ta) và gắn transition vào để hiệu ứng diễn ra chậm hơn. Tiếp theo

.button1 span{
    position:relative;
    display:inline-block;
    cursor:pointer;
    transition:0.5s;
}

Đây là phần thao tác cho đoạn text trong span, ta gắn cho nó position:relative – tức gắn cho đoạn text, để khi thêm vào dấu mũi tên phía sau vị trí của nó sẽ phụ thuộc vào phạm vi của đoạn text này và không quên transition để hiệu ứng diễn ra mượt mà hơn.

.button1 span:after{
    content:"\00bb";
    position:absolute;
    right:-15px;
    transition:0.5s;
    opacity:0; 
}

Tiếp theo với span:aftercó nghĩa là ta sẽ gắn dấu mũi tên vào cuối đoạn text và với position:absolute để đảm bảo mũi tên nằm trong phạm vi đoạn text. Ta tạm thời gắn cho nó opacity:0 có nghĩa là nó không xuất hiện và chỉ xuất hiện từ từ (vì có transition) khi chúng ta rê chuột vào

.button1:hover span{
    padding-right:20px;
}
.button1:hover span:after{
    opacity:1;
    right:0;
}

Tiếp theo là phần giúp cho mũi tên xuất hiện, khi chúng ta rê chuột vào button nó sẽ dài ra sang phải một tí (padding-right:20px;) vào dấu mũi tên được xuất hiện (opacity:1;). Đây là button của chúng ta.

Kiểu 2 (Hiệu ứng nhấp chuột – “pressed”)

Vẫn là chuẩn bị một button bình thường như ở trên bằng html chúng ta sẽ không nhắc lại. Tuy nhiên vì đây là một hiệu ứng khác nên phần tạo hình button cũng hơi khác. Chúng ta sẽ đặt cho nó class là button2.

.button2{
    background:#1abc9c;
    padding:1.2em 1.4em;
    font-size:20px;
    margin:5px;
    border:none;
    border-radius:10px;
    box-shadow:0 9px gray;
    cursor:pointer;
    outline:none;
}

Đây là button2:
alt text
Button thứ hai này khác cái trước ở chỗ là nó sẽ được đổ bóng xuống dưới chân như hình trên và đồng thời loại bỏ viền màu xanh mặc định khi nhấp vào. Tiếp theo là phần quan trọng tạo nên hiệu ứng của button

.button2:active{
    transform:translate(0,4px);
    box-shadow:0 4px gray;  
}

Khi ta nhấp vào button thì phần màu xanh ở trên sẽ dịch xuống dưới 4px và đồng thời phần bóng cũng thu hẹp đi 5px (đó là với button ở trên, có thể dài ngắn tùy chúng ta) vào tạo ra hiệu ứng “nhấp chuột”.

Kiểu 3 (Hiệu ứng gợn sóng)

Đi đến một hiệu ứng nửa cho button đó là gợn sóng – ripple. Nó sẽ được gắn cho class là button3

.button3{
    position:relative;
    background-color:lightblue;
    border:none;
    padding:1.2em 1.4em;
    overflow:hidden;
    font-size:19px;
    transition:0.4s;
}

Phần tạo hình thì cũng như một button bình thường, tuy nhiên chúng ta sẽ gán cho nó position:relative tức coi nó như vật thể “mẹ” và phần gợn sóng là vật thể “con” nằm gọn trong “mẹ”. Tiếp theo là gán overflow:hidden để đảm bảo rằng thằng “con” kia không nhảy văng ra khỏi “mẹ”.

.button3:after{
    content:"";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    left:0;
    bottom:0;
    opacity:0;
    transition:all 0.8s;
}

Tiếp theo là ta sẽ gán một background màu xám nằm bên trong buttonvà bao phủ hết button (padding-top: 300%;padding-left: 350%;) tuy nhiên nó sẽ không lố ra ngoài vì chúng ta đã giới hạn bằng overflow:hidden ở trên rồi. left:0 và bottom:0 sẽ giúp điều chỉnh cái background đó nằm phía dưới cùng bên trái của button và đó cũng là nơi “gợn sóng” bắt đầu. Ban đầu chúng ta sẽ không thấy được background xám đó bởi vì opacity:0 cho đến khi ta nhấp vào button.

.button3:active:after{
    padding:0;
    opacity:1;
    transition:0s;
}

Đây chính là thứ giúp cho việc chúng ta nhấp vào có được hiệu ứng gợn sóng. Khi ta nhấp vào thì phần background xám đó sẽ xuất hiện (opacity:1) đồng thời thu nhỏ lại (padidng:0) và ngay lập tức phóng to ra trở lại và tạo thành hiệu ứng “gợn sóng”. Xem demo bên dưới để dễ hiểu hơn :3.

Link tham khảo

W3School tại đây

mtoplist