구글블로그에 어울리는 링크버튼 스타일 모음

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

링크버튼을 더 효과적으로 표현하는 방법

구글블로그에는 텍스트나 이미지에 링크를 걸 수 있는 에디터의 기능이 있습니다. 하지만 이것만으로는 방문자의 눈길을 사로잡기에는 뭔가가 부족한 느낌이죠. 다른곳을 보면 마우스를 올렸을때 버튼이 반응하여 눈이 확가는 버튼을 내 블로그에도 적용하고 싶다는 생각이 들죠. 이런 버튼들 찾아 헤매지말고 한 곳에서 찾아보고 마음에 드는 버튼을 골라 내 블로그에 적용해보세요.

바로 사용가능한 링크버튼 목록

아래에 본문에 사용하는 링크버튼 html코드와 css를 구분하여 올려드리니 이 코드를 바탕으로하여 css를 원하는대로 편집하여 사용해보세요. 각각의 코드에는 설명서가 있어서 코드를 모르는 분들도 쉽게 수정하며 사용이 가능하답니다.

1. 기본버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="basic-btn">링크 바로가기</a>
 
Colored by Color Scripter
cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.basic-btn {
  background-color: #4CAF50; /* 버튼 배경 색상 */
  color: white; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.basic-btn:link, .basic-btn:visited {
  color: white; /* 글자 색상 (배경이 있을 때) */
}
.basic-btn:hover, .basic-btn:active {
  background-color: #45a049; /* 호버 및 클릭 시 배경 색상 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

2. 그림자효과버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="shadow-btn">링크 바로가기</a>
 
Colored by Color Scripter
cs

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
.shadow-btn {
  background-color: #008CBA; /* 버튼 배경 색상 */
  color: white; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 버튼 그림자 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.shadow-btn:link, .shadow-btn:visited {
  color: white; /* 글자 색상 (배경이 있을 때) */
}
.shadow-btn:hover, .shadow-btn:active {
  background-color: #007bb5; /* 호버 및 클릭 시 배경 색상 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

3. 둥근버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="round-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.round-btn {
  background-color: #f44336; /* 버튼 배경 색상 */
  color: white; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 50px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.round-btn:link, .round-btn:visited {
  color: white; /* 글자 색상 (배경이 있을 때) */
}
.round-btn:hover, .round-btn:active {
  background-color: #d32f2f; /* 호버 및 클릭 시 배경 색상 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

4. 네온효과버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="neon-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.neon-btn {
  background-color: #3d3d3d; /* 버튼 배경 색상 */
  color: #ffffff; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14; /* 네온 효과 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.neon-btn:link, .neon-btn:visited {
  color: #ffffff; /* 글자 색상 (배경이 있을 때) */
}
.neon-btn:hover, .neon-btn:active {
  background-color: #2c2c2c; /* 호버 및 클릭 시 배경 색상 */
  color: #ffffff; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

5. 호버애니메이션버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="hover-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.hover-btn {
  background-color: #6f42c1; /* 버튼 배경 색상 */
  color: white !important; /* 글자 색상 */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  transition: transform 0.3s; /* 호버 애니메이션 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.hover-btn:link, .hover-btn:visited {
  color: white !important; /* 링크된 상태 및 방문한 상태의 글자 색상 */
}
.hover-btn:hover {
  transform: scale(1.1); /* 호버 시 크기 증가 */
  color: white !important; /* 호버 시 글자 색상 */
}
 
Colored by Color Scripter
cs

6. 그라데이션버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="gradient-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.gradient-btn {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 그라데이션 배경 */
  color: white; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.gradient-btn:link, .gradient-btn:visited {
  color: white; /* 글자 색상 (배경이 있을 때) */
}
.gradient-btn:hover, .gradient-btn:active {
  background: linear-gradient(to right, #ff7e5f, #e9967a); /* 호버 및 클릭 시 그라데이션 배경 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

7. 테두리버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="border-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.border-btn {
  background-color: transparent; /* 투명 배경 */
  color: #4CAF50; /* 글자 색상 (투명 배경) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border: 2px solid #4CAF50; /* 버튼 테두리 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.border-btn:link, .border-btn:visited {
  color: #4CAF50; /* 글자 색상 (투명 배경) */
}
.border-btn:hover, .border-btn:active {
  background-color: #4CAF50; /* 호버 및 클릭 시 배경 색상 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

8. 아이콘버튼 스타일

미리보기

🔗 링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="icon-btn">🔗 링크 바로가기</a>
 
Colored by Color Scripter
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
.icon-btn {
  background-color: #e7e7e7; /* 버튼 배경 색상 */
  color: black; /* 글자 색상 (배경이 있을 때) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.icon-btn:link, .icon-btn:visited {
  color: black; /* 글자 색상 (배경이 있을 때) */
}
.icon-btn:hover, .icon-btn:active {
  background-color: #d7d7d7; /* 호버 및 클릭 시 배경 색상 */
  color: black; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

9. 투명버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="transparent-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
.transparent-btn {
  background-color: transparent; /* 투명 배경 */
  color: #008CBA; /* 글자 색상 (투명 배경) */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border: 2px solid #008CBA; /* 버튼 테두리 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.transparent-btn:link, .transparent-btn:visited {
  color: #008CBA; /* 글자 색상 (투명 배경) */
}
.transparent-btn:hover, .transparent-btn:active {
  background-color: #008CBA; /* 호버 및 클릭 시 배경 색상 */
  color: white; /* 호버 및 클릭 시 글자 색상 */
}
 
Colored by Color Scripter
cs

10. 통통튀는 애니메이션버튼 스타일

미리보기

링크 바로가기

html코드

1
2
<a href="https://www.goobleguide.kr" class="animated-bounce-btn">링크 바로가기</a>
 
Colored by Color Scripter
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.animated-bounce-btn {
  background-color: #ff4081; /* 버튼 배경 색상 */
  color: white !important; /* 글자 색상 */
  padding: 10px 20px; /* 버튼 안쪽 여백 */
  text-align: center; /* 글자 정렬 */
  text-decoration: none; /* 링크 밑줄 제거 */
  display: block; /* 인라인 요소를 블록 요소로 변환하여 가운데 정렬 가능 */
  margin-left: auto; /* 왼쪽 여백 자동 설정으로 가운데 정렬 */
  margin-right: auto; /* 오른쪽 여백 자동 설정으로 가운데 정렬 */
  font-size: 16px; /* 글자 크기 */
  margin: 4px 2px; /* 버튼 간격 */
  cursor: pointer; /* 마우스 커서 모양 */
  border-radius: 4px; /* 버튼 모서리 둥글게 */
  transition: background-color 0.3s, transform 0.3s; /* 호버 애니메이션 */
  width: auto; /* 버튼 가로 크기 (필요시 조정) */
  height: auto; /* 버튼 세로 크기 (필요시 조정) */
}
.animated-bounce-btn:link, .animated-bounce-btn:visited {
  color: white !important; /* 링크된 상태 및 방문한 상태의 글자 색상 */
}
.animated-bounce-btn:hover, .animated-bounce-btn:active {
  background-color: #e91e63; /* 호버 및 클릭 시 배경 색상 */
  color: white !important; /* 호버 및 클릭 시 글자 색상 */
  animation: bounce 0.6s ease infinite; /* 통통 튀는 효과 애니메이션 */
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-10px);
  }
  40%, 60% {
    transform: translateY(5px);
  }
  80% {
    transform: translateY(-5px);
  }
}
 
Colored by Color Scripter
cs

구글블로그에 적용하는 방법

1. 구글블로그의 관리자페이지 테마 → 맞춤설정버튼 누르고 html편집 눌러 html편집창으로 진합니다.

2. html편집창에서 검색창단축키(Ctrl+F키)를 눌러 검색창을 열고 ]]></b:skin> 이코드를 찾아보세요. 이 코드 바로위에 버튼의 css코드를 삽입합니다.

3. 그리고 글쓰기할 때 버튼을 넣고싶은 위치가 있을때 html코드를 에디터의 html 보기로 변환 후에 복사하여 넣어주세요.

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

구글블로그에 어울리는 링크버튼 스타일 모음

링크버튼을 더 효과적으로 표현하는 방법

바로 사용가능한 링크버튼 목록

1. 기본버튼 스타일

미리보기

html코드

2. 그림자효과버튼 스타일

미리보기

html코드

3. 둥근버튼 스타일

미리보기

html코드

css코드

4. 네온효과버튼 스타일

미리보기

html코드

css코드

5. 호버애니메이션버튼 스타일

미리보기

html코드

css코드

6. 그라데이션버튼 스타일

미리보기

html코드

css코드

7. 테두리버튼 스타일

미리보기

html코드

css코드

8. 아이콘버튼 스타일

미리보기

html코드

css코드

9. 투명버튼 스타일

미리보기

html코드

css코드

10. 통통튀는 애니메이션버튼 스타일

미리보기

html코드

css코드

구글블로그에 적용하는 방법

댓글 쓰기

문의하기 양식