오늘은 더 읽기 버튼의 크기를 조금 키워 보겠습니다.
이전 포스팅에서는 read more 텍스트를 한글 더 읽기 로 변경 했습니다.
그리고 그 다음 포스팅에서는 더 읽기 텍스트를 더 읽기 버튼으로 변경했습니다.
아래 이미지는 이렇게 해서 완성된 모습 입니다.
read more 가 더 읽기 버튼으로 바뀌어 있습니다.
오늘 포스팅에서는 더 읽기 버튼을 조금 더 통통하게 키워 보도록 하겠습니다.
기본 방법은 더보기 버튼으로 바꾸기와 거의 동일 합니다.
처음부터 버튼 크기를 조절해서 만들어도 되지만 조금씩 꾸며가는 재미를 느끼기 위해 이렇게 수정하는 방법에 대해서 글을 올려 봅니다.
아래 두 코드는 수정 전 코드와 수정 후 코드 입니다.
padding: .2em; /* 변경 부분 */ 이 부분을 0.4 로 변경해서 버튼내부의 공간을 늘림으로서 버튼이 커지게 하는 효과를 구현 했습니다.
font-size : 20px; /* 추가 부분 */ 버튼 내부의 폰트를 키워서 보기 좋게 꾸며 보았습니다.
사용자 정의 CSS 의 해당 내용을 수정하면 더 읽기 버튼의 크기가 조금 커져서 시인성도 좋아지고 예뻐 졌습니다.
.read-more.button {
clear: both;
display: block;
margin-top: -9px;
padding: .2em; /* 변경 부분 */
border: 1.5px solid;
border-radius:5px;
background-color:rgb(54 83 215 / 3%);
color:#3350dd;
text-align: center;
}
.read-more.button:hover {
clear: both;
display: block;
margin-top: -9px;
padding: .2em;
border: 1.5px solid;
border-radius:5px;
background-color:var(--accent);
color:#fff;
text-align: center;
}.read-more.button {
clear: both;
display: block;
margin-top: -9px;
padding: .4em; /* 변경 부분 */
border: 1.5px solid;
border-radius:5px;
background-color:rgb(54 83 215 / 3%);
color:#3350dd;
text-align: center;
font-size : 20px; /* 추가 부분 */
}
.read-more.button:hover {
clear: both;
display: block;
margin-top: -9px;
padding: .4em; /* 변경 부분 */
border: 1.5px solid;
border-radius:5px;
background-color:var(--accent);
color:#fff;
text-align: center;
}아래는 최종 완성된 커진 더 읽기 버튼의 모습 입니다.
개개인마다 다르겠지만 저는 이렇게 조금 큰 버튼이 보기 좋습니다.
여러분도 취향껏 버튼 모양 수정해 보세요.
