소개
여기서는 링크를 버튼으로 만드는 방법에 대해서 알아봅니다.
사용기술
- HTML
- CSS
관련 지식
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!doctype html><html><head> <style> .btn{ text-decoration: none; font-size:2rem; color:white; padding:10px 20px 10px 20px; margin:20px; display:inline-block; border-radius: 10px; transition:all 0.1s; text-shadow: 0px -2px rgba(0, 0, 0, 0.44); font-family: 'Lobster', cursive; } .btn:active{ transform: translateY(3px); } .btn.blue{ background-color: #1f75d9; border-bottom:5px solid #165195; } .btn.blue:active{ border-bottom:2px solid #165195; } .btn.red{ background-color: #ff521e; border-bottom:5px solid #c1370e; } .btn.red:active{ border-bottom:2px solid #c1370e; } </style></head><body> <a class="btn blue" href="#blue">blue</a> <a class="btn red" href="#red">red</a></body></html> |
