[HTML, CSS] - CSS 버튼

float 속성을 이용하여 버튼으로 메뉴

---

 

 

---

 

버튼

<button>태그 뿐만 아니라 <a>태그와 <input>태그로도 만들 수 있음

button 타입의 input 요소에서 내부에 표시될 문자열은 value 속성값으로 설정 가능

<button class="btn">button 태그</button>
<a href="#" class="btn">a 태그</a>
<input type="button" value="input 태그" class="btn">

 

 transition-duration 속성 : 배경색과 글자의 색상까지 변경

box-shadow 속성 : 버튼에 실제와 같은 그림자 효과를 간단히 설정

 

disabled 속성 : 버튼을 사용하지 못함

반투명하게 보이며, cursor 속성의 속성값을 not-allowed로 설정하면, 사용이 금지된 버튼을 더욱 그럴싸하게 표현 가능

<style>
    .btn2 { opacity: 0.4; cursor: not-allowed; disabled; }
</style>

 

float 속성 : 버튼으로 메뉴 제작

<style>
    .btn {
        background-color: #87CEEB;
        border: solid 1px #00BFFF;
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        float: left;
    }
</style>

 

 

등등 다양한 버튼 제작 가능!

 

---

 

https://www.tcpschool.com/css/css3_expand_buttons