티스토리 공감, 구독하기 버튼 간단하게 수정하기

문득 본문 하단에 있는 공감, 구독하기 버튼이 눈에 들어왔다. 살짝 허접한 버튼이 뜬금없이 붕 떠있는 느낌이랄까. 퀄리티 좋은 유료 스킨들은 이 버튼들까지도 세세하게 디자인을 수정하던데, 달랑 CSS 한 줄이지만 나도 한번 간단하게 수정해봤다.

아래는 현재 글 작성 기준 각 버튼의 기본적인 CSS 코드다.

공감 버튼

.container_postbtn .postbtn_like {
	float: left;
	padding: 0 9px;
	border-radius: 16px;
	border: 1px solid #959595;
	border-color: rgba(185,185,185,0.5);
	font-size: 0 !important;
}

구독하기 버튼

.container_postbtn .btn_menu_toolbar {
	width: 80px;
	height: 32px;
	padding: 0;
	border: 1px solid rgba(185,185,185,.5);
	border-radius: 16px;
	font-size: 0 !important;
	line-height: 30px;
	color: inherit;
	box-sizing: border-box;
	font-family: "Noto Sans DemiLight",AppleSDGothicNeo,"Malgun Gothic","맑은 고딕","돋움",dotum,sans-serif;
}

---

기존 CSS 코드를 참고해서 입맞에 맞게 수정하면 될 것 같다. 나는 양쪽 모서리가 너무 둥글어서 border-radius 옵션을 2px로 줬다. 아래는 스킨 편집 - CSS 탭 가장 하단에 추가한 코드이다.

추가한 코드

.container_postbtn .postbtn_like,
.container_postbtn .btn_menu_toolbar {
	border-radius: 2px !important;
}

개인적으로 모서리 부분만 수정했는데도 기본 버튼 보다 훨씬 나아 보인다. 나중에 시간이 되면 버튼 속 아이콘도 바꿔봐야겠다.