워드프레스에서 버튼 만들기 2편 - 펭수의 워드프레스 보물창고

저번 포스팅에서 버튼 만들기 사이트를 소개 드렸었습니다.
버튼 만들기 1편 아직 확인하지 않으셨으면 먼저 보고 오시는걸 추천 드립니다.

워드프레스에서 버튼 만들기

방문자의 전환율과 체류기간을 높이는 워드프레스 CTA 버튼 만들기와 꾸미기 방법에 대해 알아보세요. 펭수의 이것저것 블로그에서 자세한 내용을 확인하세요.

펭수의 이것저것 블로그

오늘은 기존에 소개 드렸던 버튼과는 또 다른 느낌의 그라디언트 효과가 적용된 버튼 생성기 사이트 입니다.

사용법은 이전 내용과 동일하나 버튼의 효과 및 모양이 훨씬 다양하게 준비되어 있습니다.
이전 툴은 전체 버튼 모양을 직접 설정 하는 방식이었지만 이번 툴은 미리 준비된 버튼을 선택하면 예쁘게 생성되는 툴입니다.

사용법은 이전보다 훨씬 쉽고 간편 합니다.
버튼 ID를 입력하고 버튼 글씨에 버튼에 쓰여질 글씨를 입력한 후 모서리 Radius 를 슬라이더로 선택한 후 원하는 버튼을 클릭하면 코드가 복사 됩니다.

버튼을 클릭하거나 복사하기 버튼을 클릭하면 소스코드가 클립보드에 복사 됩니다.
아래는 복사된 코드 입니다.

<button id="aa" class="btn-grad">버튼 텍스트</button>

.btn-grad {
    background-image: linear-gradient(to right, #16A085 0%, #F4D03F  51%, #16A085  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}

.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

복사된 코드를 HTML 사용자 정의 HTML 을 이용해서 입력하면 됩니다.
이때 약간의 수정이 필요한데

아래 HTML 코드를

<button id="aa" class="btn-grad">버튼 텍스트</button>

아래와 같이 수정 했습니다.
style=”text-align:center” 은 버튼을 중앙에 배치시키는 코드 입니다.

<div style="text-align:center">
    <button id="aa" class="btn-grad">버튼 텍스트</button>
</div>

다음으로 CSS 코드를

아래는 수정해서 적용한 전체 코드 입니다.

<div style="text-align:center;">
    <button id="aa" class="btn-grad">버튼 텍스트</button>
</div>
<style>
.btn-grad {
    background-image: linear-gradient(to right, #16A085 0%, #F4D03F  51%, #16A085  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;

}

.btn-grad:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}
</style>

이제 버튼만들기 1편을 응용해서 버튼을 클릭하면 사이트로 이동하는 코드로 수정해 보겠습니다.

사이트 바로가기

기존 코드를 조금만 수정하면 위 버튼처럼 클릭하면 다른 사이트로 이동하는 버튼으로 바꿀 수 있습니다.
수정 코드는 아래와 같습니다.
아래 코드를 보면 div 테그를 a 태그로 바꾸고 href 를 이용해서 이동할 사이트 주소를 넣고 target=”_blank” 는 새창에서 열기를 의미 합니다.

style 은 위에서 .btn-grad 에 대한 스타일이 정의 되어 있기 때문에 다시 정의할 필요는 없지만 a 태그의 경우 글씨에 밑줄이 생기기 때문에 text-decoration:none; 을 주어서 밑줄을 없애주는 CSS 만 추가 하였습니다.

그라디언트 버튼 CSS 생성기

그라디언트 버튼 CSS 생성기는 사용자가 커스텀 그라디언트를 사용하여 웹 버튼을 만들 수 있는 도구입니다. 색상 선택, 그라디언트 효과, 버튼 스타일링, 미리보기 기능 등을 통해 사용자는 버튼의 디자인을 자유롭게 조정할 수 있습니다. 이를 통해 사용자는 고유한 스타일의 버튼을 쉽게

펭수의 워드프레스 꾸미기

이로써 워드프레스 버튼 만들기 2편이 모두 완료 되었네요.
사용해보시고 불편한 점 있으시면 댓글로 남겨 주시면 감사하겠습니다.

댓글 남기기 응답 취소