워드프레스 버튼 꾸미기

제가 혼자서 해보면서 느끼는 워드프레스 버튼 꾸미기

현재는 spetra에 있는 버튼을 사용하고 있었는데 이 버튼의 디자인을 항상 글마다 지정을 해야하기에 너무 번거러워서

이번 기회에 워드프레스 버튼 블록이나 추가 css를 이용해서 버튼 디자인의 일관성을 만들고자 합니다.

워드프레스 버튼 블록 꾸미기

.wp-block-button {
text-align: center;
}

.wp-block-button .wp-block-button__link {
margin: 20px 10px; /* 간단한 shorthand를 사용해 여백을 설정 / width: 600px; / 모바일에서 전체 너비를 차지하도록 설정 */
padding: 15px 30px !important;
border-radius: 5px !important;
background: linear-gradient(to right, #ff7f00, #ffcc00) !important;
color: #ffffff !important;
font-size: 24px !important;
font-weight: bold !important;
transition: background-color 0.3s !important;
box-shadow:0px 10px 20px 1px rgb(200 200 200);

}

.wp-block-button .wp-block-button__link:hover {
background-color: #2980b9 !important;
}
.wp-block-button { color: #ffffff !important; / 버튼 텍스트 색상 / transition: all 0.15s ease-in-out; / 버튼 축소 속도 / } .wp-block-button:hover { cursor: pointer; / 마우스 위치 시 포인터로 표시 / transform: scale(1.05); / 마우스 위치 시 버튼 확대 크기/ transition: all 0.20s ease-in-out; / 버튼 확대 속도 / } @media only screen and (max-width: 600px) { .wp-block-button .wp-block-button__link { width: 100%; / 모바일에서 전체 너비를 차지하도록 설정 / padding: 15px 20px !important; / 모바일에서 패딩값을 조정 / font-size: 18px !important; / 모바일에서 폰트 크기를 줄임 */
}

.wp-block-button .wp-block-button__link:hover { background-color: #2980b9 !important; }

}

추가 CSS를 통한 버튼 꾸미기

삿포로 웨딩 셀프 촬영 후기 고고

.click-me a {
font-size: 1em !important;
color: #ffff !important;
text-decoration: none !important;
}

.click-me a:hover{
color: rgb(238, 18, 153);
font-weight: bold;
}

.click-me a:active {
position:relative;
top:1px;
}

/* CSS 버튼 #1/ .click-me { background-color: #ffcc00 ; color: white !important; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s, transform 0.3s; width: 70%; / Set width to 80% / height: 60px; / Adjust the height value as needed / box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4); font-size: 24px; / Increases font size / line-height: 1.5; / Adjust line height as needed / text-align: center; / Centers the text horizontally / white-space: nowrap; / Prevents the text from wrapping to multiple lines / overflow: hidden; / Hides any overflowed text / display: block; / Converts the button into a block-level element */

font-weight: bold;
margin-left: auto;
margin-right: auto;
}

.click-me:hover {
background-color: rgb(235, 161, 65);
transform: scale(1.1);
}

.click-me.most-likely-to-click {
padding: 20px 30px; /* Increase padding to make the button bigger / font-size: 50px; / Increase font size for the most likely to click button */
}

@media only screen and (max-width: 600px) {
.click-me {
width: 100%; /* 모바일에서 전체 너비를 차지하도록 조정 / padding: 15px; / 모바일에서 조금 더 큰 패딩값으로 조정 / font-size: 18px; / 모바일에서 작은 화면에 맞춰 폰트 크기를 줄임 */
}

.click-me.most-likely-to-click {
padding: 20px 30px; /* Increase padding to make the button bigger / font-size: 30px; / Increase font size for the most likely to click button */
}
}

click-me 사용자 정의 > 추가 css에 넣어둔 코드입니다.

만약 사용시 블록을 지정해 추가 css에 click-me 를 적으면 적용됩니다.