css 버튼 관련 코드

버튼 배경색

 

 background-color:#0a0a23;

버튼 글자색

color: #fff;

버튼 태두리

border:none; // 태두리 없음
border-radius:10px; // 태두리 둥글게

버튼 네온 효과

box-shadow: 10px 5px 5px red; // 버튼으로 부터 x좌표 10px, y좌료 5px 떨어진 곳에 네온 범위 5px인 red색상의 사각형 생성
box-shadow: 60px -16px teal; // 위 코드와 동일하지만 네온이 없다.
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); // 1번재 줄과 동일하지만 4번째 argument는 네온박스의 추가적인 크기를 나타낸다
box-shadow: inset 5em 1em gold; // 안쪽으로 네온 생성

태두리 추가

padding:15px; // 15px의 테두리 추가

버튼 특수 효과

button:hover{}

button:focus{}

등으로 따로 적용시켜야함

 

1.hover

마우스를 버튼에 올렸을때 동작

2.focus

키보드 Tab키(⇥)를 눌러 버튼이 포커스 되었을 때 활성화,

버튼이 눌렸을때도 활성화

3.active

마우스로 버튼을 눌렀을때 동작