html/css 버튼에 링크 삽입, 꾸미기, 비활성화

수업에서 문구에 링크 삽입하는 방법 공부했다.
그런데 클릭이 가능한 건 버튼처럼 보이면 더 직관적이겠다 싶어서 찾아봤다.

1. 버튼에 링크 삽입
   html에서 아래처럼 입력 후

<button type="button" onclick="location.href='경로.파일확장자' ">버튼명</button>

전(왼쪽) ~ 후(오른쪽) 비교:

2. 버튼 꾸미기
   먼저 위 문구에 class="button" 추가

<button type="button" class="button" onclick="location.href='경로.파일확장자' ">버튼명</button>

css 또는 html style에선 실제 화면 보면서 내 마음대로 버튼 꾸미기

.button{
    color: #ffffff; /* 글자 색깔 */
    text-align:center; /* 글자 중앙정렬 */
    background-color: #96a9fe; /* 버튼 색깔 */
    border: none; /* 테두리 제거 */
    border-radius: 3px; /* 모서리 동그랗게 */
    padding: 4px; /* 글자와 테두리의 안전거리? */
    min-height: 20px; min-width: 70px; /* 보는 기기에 따라 버튼 크기 조정 가능토록 */
    cursor: pointer; /* 마우스 손가락으로 변형 */
}

짠~

마우스 갖다댔을 때 버튼에 반응 추가

.button:hover{
    color: #654de0; /* 전환 글자 색깔 */
    background-color: #dee1fd; /* 전환 버튼 색깔 */
    transition: 0.3s; /* 전환시간 */
}

결과:

백엔드를 메인으로 하는 과정이지만 프론트 꾸미는 게 역시 언제나 재미솔솔!

참고자료👍

3. 버튼 비활성화

<button disabled>버튼명</button>

참고자료