Tạo nút bấm bàn phím bằng CSS cho blog chia sẻ thủ thuật
Thường những blog hoặc website chia sẻ các thủ thuật liên quan đến IT hay có những hướng dẫn liên quan đến các tổ hợp phím ví dụ như Ctrl + A hay Ctrl + C
Và bài viết này mình sẽ hướng dẫn anh em tạo những nút bàn phím như ở ví dụ trên bằng CSS
Hướng Dẫn
CSS.chuhdc{line-height: 2.8em;}
.phimhdc > * {background: #333;text-align: center;color: #eee;border-radius: 0.3em;padding: 5px;cursor: pointer;border: 1px solid #444;box-shadow: 0 0.2em 0 0.05em #222;border-bottom-color: #555;}
.phimhdc > span:active {background: #2a2a2a;color: #aaa;position: relative;top: 0.2em;box-shadow: 0 0 0 0.05em black;}
HTMLĐể chèn các nút bàn phím bạn sử dụng theo cú pháp HTML bên dưới, ví dụ:
<a class="phimhdc"><span class="chuhdc"> Ctrl </span></a>Trong đó Ctrl là nội dung của phím bấm
Kết quả ta sẽ được Ctrl
Lưu ý: đối với các phím chỉ có 1 chữ ví dụ như H các bạn thêm ký tự khoảng trống bằng cách bấm tổ hợp phím Alt + 0 1 6 0 vào hai bên của chữ cái để cho nút bấm được cân đối hoặc viết theo cú pháp sau:
<a class="phimhdc"><span class="chuhdc"> A </span></a> trong đoạn code trên chính là ký tự khoảng trống
Cảm ơn đã theo dõi, chúc anh em những điều tốt đẹp nhất!