구글블로그 본문의 파스텔톤 링크버튼 10개 색상 골라서 사용하기

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

블로그 링크버튼 하나씩은 있잖아요?

아직 블로그에 링크버튼 안만들고 그냥 텍스트에 링크거는 분 있는거 아니죠? 만약 그렇게 사용하고 있다면 지금이라도 원하는 버튼 스타일을 골라서 적용하고 조금더 전문적이고 있어보이는 버튼으로 꾸며보세요. 버튼은 링크를 클릭함으로써 얻는 광고수익도 높일 수 있는 부분이 있기때문에 더욱 신경쓰셔야하는 부분입니다.

이번 시간에는 여성분들이 더 애용하실만한 파스텔톤의 포근한 느낌을 주는 버튼 10개를 가지고 왔습니다. html코드는 본문의 html모드에 붙여넣기하고 문구를 바꿔서 사용하시고, CSS는 테마 → 맞춤설정버튼 → html편집 → ]]></b:skin>코드 찾기 → 그위에 css삽입 순서로 적용하세요.

html코드의 https://example.com은 원하는 링크주소로 변경하시면 되고, target='_blank" 코드는 새창으로 열기이니 필요없으시면 삭제하면 됩니다.

핑크버튼

핑크 버튼

html코드 복사하기

1
<a class="btn-pastel-pink" href="https://example.com" target="_blank"><span class="btn-text">핑크 버튼</span></a>
cs

css코드 복사하기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 핑크 버튼 스타일 */
.btn-pastel-pink {
    background-color: #ffd1dc; /* 파스텔 핑크 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-pink:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 핑크 버튼 텍스트 스타일 */
.btn-text {
    color: #7a1f1f !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

코랄 버튼

html코드 복사하기

1
<a class="btn-pastel-coral" href="https://example.com" target="_blank"><span class="btn-text">코랄 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 코랄 버튼 스타일 */
.btn-pastel-coral {
    background-color: #ffb6b9; /* 파스텔 코랄 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-coral:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 코랄 버튼 텍스트 스타일 */
.btn-text {
    color: #7a1f1f !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

오렌지 버튼

html코드 복사하기

1
<a class="btn-pastel-orange" href="https://example.com" target="_blank"><span class="btn-text">오렌지 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 오렌지 버튼 스타일 */
.btn-pastel-orange {
    background-color: #ffdbac; /* 파스텔 오렌지 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-orange:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 오렌지 버튼 텍스트 스타일 */
.btn-text {
    color: #7a1f1f !important; /* 텍스트 색상, !important 추가 */
}
 
Colored by Color Scripter
cs

베이지 버튼

html코드 복사하기

1
<a class="btn-pastel-beige" href="https://example.com" target="_blank"><span class="btn-text">베이지 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 베이지 버튼 스타일 */
.btn-pastel-beige {
    background-color: #ffecd2; /* 파스텔 베이지 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-beige:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 베이지 버튼 텍스트 스타일 */
.btn-text {
    color: #7a1f1f !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

옐로우 버튼

html코드 복사하기

1
<a class="btn-pastel-yellow" href="https://example.com" target="_blank"><span class="btn-text">옐로우 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 옐로우 버튼 스타일 */
.btn-pastel-yellow {
    background-color: #ffffcc; /* 파스텔 옐로우 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-yellow:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 옐로우 버튼 텍스트 스타일 */
.btn-text {
    color: #7a7a1f !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

블루 버튼

html코드 복사하기

1
<a class="btn-pastel-blue" href="https://example.com" target="_blank"><span class="btn-text">블루 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 블루 버튼 스타일 */
.btn-pastel-blue {
    background-color: #d4f0f0; /* 파스텔 블루 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-blue:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 블루 버튼 텍스트 스타일 */
.btn-text {
    color: #1f5c7a !important; /* 텍스트 색상, !important 추가 */
}
 
Colored by Color Scripter
cs

민트 버튼

html코드 복사하기

1
<a class="btn-pastel-mint" href="https://example.com" target="_blank"><span class="btn-text">민트 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 민트 버튼 스타일 */
.btn-pastel-mint {
    background-color: #d3f8e2; /* 파스텔 민트 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-mint:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 민트 버튼 텍스트 스타일 */
.btn-text {
    color: #1f7a5c !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

라임 버튼

html코드 복사하기

1
<a class="btn-pastel-lime" href="https://example.com" target="_blank"><span class="btn-text">라임 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 라임 버튼 스타일 */
.btn-pastel-lime {
    background-color: #e1f7d5; /* 파스텔 라임 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-lime:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 라임 버튼 텍스트 스타일 */
.btn-text {
    color: #5c7a1f !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

부드러운 핑크 버튼

html코드 복사하기

1
<a class="btn-pastel-softpink" href="https://example.com" target="_blank"><span class="btn-text">부드러운 핑크 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 부드러운 핑크 버튼 스타일 */
.btn-pastel-softpink {
    background-color: #fbe4e4; /* 파스텔 부드러운 핑크 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-softpink:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 부드러운 핑크 버튼 텍스트 스타일 */
.btn-text {
    color: #7a1f3b !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

퍼플 버튼

html코드 복사하기

1
<a class="btn-pastel-purple" href="https://example.com" target="_blank"><span class="btn-text">퍼플 버튼</span></a>
cs

css코드 복사하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 퍼플 버튼 스타일 */
.btn-pastel-purple {
    background-color: #e8eaf6; /* 파스텔 퍼플 배경색 */
    padding: 15px 30px; /* 버튼의 내/외부 여백 */
    border-radius: 15px; /* 둥근 모서리 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
    font-family: "Noto Sans KR", sans-serif; /* 폰트 설정 */
    font-weight: 600; /* 텍스트 두께 */
    transition: 0.25s; /* 트랜지션 효과 */
    width: 80%; /* 본문의 가로넓이에 맞추기 */
    margin: 10px auto; /* 버튼 간격 및 가운데 정렬 */
    display: flex; /* 버튼을 가운데 정렬하기 위해 flexbox 사용 */
    justify-content: center; /* 수평 가운데 정렬 */
    text-decoration: none; /* 텍스트 밑줄 제거 */
    border: none; /* 테두리 없음 */
    text-align: center; /* 텍스트 가운데 정렬 */
}
.btn-pastel-purple:hover {
    filter: brightness(90%); /* 호버 시 밝기 조절 */
}
/* 퍼플 버튼 텍스트 스타일 */
.btn-text {
    color: #3b1f7a !important; /* 텍스트 색상, !important 추가 */
}
Colored by Color Scripter
cs

이 글의 카테고리 : 꾸미기팁

구글블로그 본문의 파스텔톤 링크버튼 10개 색상 골라서 사용하기

블로그 링크버튼 하나씩은 있잖아요?

핑크버튼

html코드 복사하기

css코드 복사하기

코랄 버튼

html코드 복사하기

css코드 복사하기

오렌지 버튼

html코드 복사하기

css코드 복사하기

베이지 버튼

html코드 복사하기

css코드 복사하기

옐로우 버튼

html코드 복사하기

css코드 복사하기

블루 버튼

html코드 복사하기

css코드 복사하기

민트 버튼

html코드 복사하기

css코드 복사하기

라임 버튼

html코드 복사하기

css코드 복사하기

부드러운 핑크 버튼

html코드 복사하기

css코드 복사하기

퍼플 버튼

html코드 복사하기

css코드 복사하기

댓글 쓰기

문의하기 양식