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">&nbsp;A&nbsp;</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!