온라인으로 css 버튼 만들기.
css를 활용을 해서 디자인을 하다보면 버튼을 만들어야 할 때가 있다.
물론 본인이 퍼블리셔이거나 html, css문법을 공부를 해서 잘 알고 있다면 이러한 일은 손쉽다.
하지만 전공이 아니거나 잘 모르긴 하지만 css 버튼을 만들어야 할 때에는 온라인 제네레이터를 통해서 생성을 하면 된다.
이미 만들어져 있고 예시를 보여주고 있으므로 기본적인 색깔에서 선택해서 바로 css 코드를 볼 수 있다.
색깔이 마음에 안들거나 변경을 해야 할 경우에도 색상 팔레트를 참조하여 원하는대로 변경을 하면 바로 적용이 된다.
그라데이션으로 적용을 해서 단색이 아닌 표현을 하는 버튼을 생성할수도 있고 보더나 미세한 색을 보정을 하고 알맞게 수정을 할 수 있다.
해외사이트에서 제공을 하고 있어서 메뉴등이 영문이지만 쓰는데 전혀 불편함은 없다.
어차피 css스타일을 봐야하고 코드를 봐야 하기 때문에 한글은 불필요하다.
초록배경 css 라운드 버튼 : https://www.bestcssbuttongenerator.com/#/0
파란색 css 사각 버튼 : https://www.bestcssbuttongenerator.com/#/7
노란색 css 사각 버튼 : https://www.bestcssbuttongenerator.com/#/14
보라색 css 사각 버튼 : https://www.bestcssbuttongenerator.com/#/21
빨간색 css 사각 버튼 : https://www.bestcssbuttongenerator.com/#/39
일단은 기본적인 색깔을 맞추고 사각 버튼이 아니라 라운드를 주고 싶으면 border-radius를 코드에서 사용할 때 값을 키우면 된다.
샘플로 제공이 되는 버튼을 아무거나 클릭한 후에 색상은 아래쪽의 팔레트를 선택을 해서 수정을 하면 된다.
각각 제일 첫번째의 회색박스부터 순서대로
Preview Box Color
Gradient Top Color
Gradient Bottom Color
Font Color
Border Color
Box Shadow Color
Text Shadow Color
로 되어 있다.
각 색을 선택해서 이리 저리 색깔을 변경을 해보면 css 버튼 모양도 따라 바뀌므로 바로 확인을 할 수 있다.
다 작성을 하였으면 Get Code를 넣으면 오른쪽 화면에 코드가 나타나니 복사해서 쓰면 된다.
기본 클래스는 myButton이므로 복사를 해서 변경을 하면 된다.
링크로 걸리는 버튼이므로 간혹 스킨이나 전체 스타일에서 지정이 되어 있어서 색깔이 안바뀌거나 밑줄이 나온 경우가 있는데 그 때는 a.myButton으로 해서 색 지정을 다시 해주면 된다. 기본 값은 흰색이다.
읽어볼만한 글들
포토샵 도형 따라 글씨 쓰기
포토샵 도형 따라 글씨 쓰기.패스 라인을 그려놓고 그 모양에 맞게 글씨를 써서 표현을 해야 할 경우가 있다. 이는 생각보다 많이 활용을 하게 된다. 기본적인 문구를 배치해서 페이지를 디자인
sway.tistory.com
포토샵 흐린사진 선명하게
포토샵 흐린사진 선명하게 하기.사진을 촬영하거나 이미지를 구해온다면 더러 이미지가 흐려서 선명하게 해야 할 때가 있다. 전체 흐린 사진을 보정하는것도 있겠지만 포토샵 부분 선명하게를
sway.tistory.com
갤럭시 통화 자동녹음 설정
갤럭시 통화 자동녹음 기능은 간간히 필요하게 된다. 중요한 내용을 기억을 해야 하거나 할때 통화 녹음 기능은 사용을 해서 다시 들어보게 된다. 물론 녹음파일도 핸드폰의 저장공간을 사용하
sway.tistory.com
두가지 색상의 gradient를 원치 않고 단색으로만 할 경우는 체크박스에 체크를 해주면 코드에서도 색이 빠진다.
오버나 클릭시의 색깔도 함께 버튼에 적용을 시킬 수가 있으므로 눈으로 보고 조절을 하고 코드 복사 후 사용하면 끝이다.
이러한 간단한 부분인거 같지만 실제 퍼블리싱을 하거나 레이아웃 디자인을 할 때 페이지에 버튼은 무조건 들어간다고 봐도 과언이 아닌데 그럴 때 일일이 이게 이쁜지 저게 이쁜지 보다 이미 이쁘게 만들어진것을 토대로 하여 작업을 하면 시간을 줄여준다.