Hướng dẫn tạo chèn Call To Action – nút kêu gọi hành động vào bài viết WordPress

Nghỉ dịch lâu lâu lướt tìm kiếm tài liệu cũng như thông tin hay để học hỏi thì có biết một số web có mẫu nút liên hệ (call to action) rất hay cả về hiệu ứng và màu sắc. Cùng nhiều bạn chia sẻ rồi cách làn cung rất dễ xong để tổng hợp được thành một bộ mã code hoàn thiện để quý bạn bè copy chèn vô website của mình thì bài viết này sẽ hướng dẫn các bạn có được một bộ code hiển thị nút liên hệ đẹp mắt và phù hợp với webiste của mình

Mẫu nút liên hẹ 1 hiệu ứng trượt ngang

Code:

<div class=”type kbw-button-2″>
<div><a href=”tel:0356 287 646” class=”kbw-bt kbw-bt-2″><span class=”txt”>0356 287 646</span><span class=”round”><i class=”fa fa-phone faa-ring faa-slow animated”></i></span></a></div>
<div><a href=”#tuvanngay” class=”kbw-bt kbw-bt-1″><span class=”txt”>Đăng ký tư vấn</span><span class=”round”><i class=”fa fa-envelope faa-ring faa-slow animated” style=”margin-top: -9px;margin-left: -7px;”></i></span></a></div>
</div>
<style>
.type.kbw-button-2 {display: block;position: fixed;left: 20px;bottom: 5%;text-align: center;z-index: 69696969;}
.type.kbw-button-2 > div {margin: 5px auto;}
.kbw-button-2 .kbw-bt-1 {background-color: #F27935;}
.kbw-button-2 .kbw-bt-1 .round {background-color: #f59965;}
.kbw-button-2 .kbw-bt-2 {background-color: #1E73BE;}
.kbw-button-2 .kbw-bt-2 .round {background-color: #328DDC;}
.kbw-button-2 a { line-height: 16px; text-decoration: none;-moz-border-radius: 40px;-webkit-border-radius: 30px;border-radius: 40px;padding: 12px 53px 12px 23px;color: #fff;text-transform: uppercase;font-family: sans-serif;font-weight: bold;position: relative;-moz-transition: all 0.3s;-o-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;display: inline-block;}
.kbw-button-2 a span {position: relative;z-index: 3;}
.kbw-button-2 a .round {-moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;width: 38px;height: 38px;position: absolute;right: 3px;top: 3px;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;z-index: 2;}
.kbw-button-2 a .round i {position: absolute;top: 50%;margin-top: -6px;left: 50%;margin-left: -4px;-moz-transition: all 0.3s;-o-transition: all 0.3s;-webkit-transition: all 0.3s;transition: all 0.3s;}
.kbw-button-2 .txt {font-size: 14px;line-height: 1.45;}
.kbw-button-2.type a:hover {padding-left: 48px;padding-right: 28px;}
.kbw-button-2.type a:hover .round {width: calc(100% – 6px);-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.kbw-button-2.type a:hover .round i {left: 12%;}
</style>
Mục màu đỏ trong đonạ code các bạn thay sđt  và id của form các bạn đang dùng  nhé.

Mẫu nút liên hệ căn trái dang dọc với hiệu ứng hover

 

Mẫu nút liên hệ gọi

<div class=”phone_animation”><a href=”tel:0356287646“>
<div class=”phone_animation_circle”></div>
<div class=”phone_animation_circle_fill”></div>
<div class=”phone_animation_circle_fill_img”></div></a>
</div>

Code CSS: