Tạo Ghost Button

Ghost button là gì? Ghost button là button ẩn khi đưa chuột vào thì nó mới hiện hình lên, đơn giản vậy thôi.

.ghost-button {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button:hover,
.ghost-button:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}

Cách sử dụng: class=”ghost-button”.

Ví dụ: Nếu bạn muốn thêm một download link, thì sử dụng code dưới đây

 
<a class="ghost-button" href="link cần">Download Now</a>

Demo:

Download Now