(html코딩)마케터를 위한 바로가기 버튼 생성법

2017.04.11 17:17|

권용범|

추천19|

조회수1,369|

댓글8

(아래 html로 만들어진 버튼입니다.) ^^ 

 마케터 여러분, 뉴스레터를 보낼 때 자사 홈페이지로 유입을 유도하는 바로가기 버튼 하나만 있어도 효과가 달라진다는 이야기가 있습니다.

뉴스레터뿐만 아니라 이제는 마케터도 간단한 코딩 정도는 할 줄 알아야 하는 세상 ㅠㅠ

저도 간간히 공부하고 있을 뿐, 완벽하게 알지는 못하는데요

그래도 여러분과 함께 알아가고자 바로가기 링크가 걸리는 버튼의 소스를 올려봅니다.

 

아래 보여지는 url에 여러분이 링크를 걸고 싶은 사이트 주소를 복사해서 붙여넣기만 하면 됩니다.

https://www.realpacking.com/?utm_source=hello0411&utm_medium=i_boss&utm_campaign=i_boss_love&utm_content=btn 

 

만약 버튼의 모양을 좀 변형하고 싶다면?

 

<div style="margin: 0 auto;padding: 0;max-width: 760px;clear: both;line-height: 1.8;"><a href="https://www.realpacking.com/?utm_source=hello0411&utm_medium=i_boss&utm_campaign=i_boss_love&utm_content=btn" style="background: #3498db;border: 1px solid #3498db;color: #fff;cursor: pointer;text-decoration: none;border-radius: 100px; font-size: 16px;padding: 8px 16px;font-weight: 600;" target="_blank">더 알아보기</a> 

 

1. Border: 1px라고 되어 있는 부분을 조정하면 버튼이 두꺼워 집니다.

2. font-size: 16px 라고 되어 있는 부분에서 픽셀 값을 조정하면 텍스트 크기가 변합니다.

3. padding: 8px 16px  왼쪽 8px를 변경하면 버튼의 위 아래 길이가 변하고

                     오른쪽 16px를 변경하면 버튼의 좌, 우측 길이가 변합니다.

4. font-weight: 600 (해당 숫자를 조절하면 글씨 두깨가 변합니다.)  

 

이상 간단한 버튼 소스를 올려봤습니다. 버튼의 길이나 폰트 두깨 등을 수정하고 싶으신 분들은 수정하셔도 됩니다. ^^ 다음에는 다른 내용을 공부해서 가져오겠습니다. 감사합니다. ^^

 

하트 아이콘비비드드림님 외 18명이 추천했습니다.

 권용범
포장영상 촬영 솔루션 '리얼패킹' - 권용범 www.realpacking.com
  • 활동지수3단계 (107점)
  •  

댓글 8
아이보스 알림

지금 이 글은 권용범 보스님의 아이보스 인기 게시글입니다.

SNS에 공유하여 정보를 나누어 보세요. 페이스북 트위터 카카오스토리
하루동안 보지 않기
소셜로그인
번호제목작성자등록일추천조회
149판촉사이트 운영중입니다. 네이버 쇼핑 연동관련[1] 

다연맘

17.07.19151
148쇼핑몰 스토리보드 샘플 혹시 구할수있을까요? 

나스민

17.07.19053
147직영몰 제작 준비중입니다. 그런데...[4] 

툴홀릭

17.07.140129
145카페24에서 상품후기 에디터문의드립니다.[9] 

클림트가구

17.06.290246
144무점포 소자본창업을 꿈꾸고있습니다[1] 

택배왕김착불

17.06.190156
143고도몰, 카페24 쇼핑몰제작시 기본 구매해야할 것?[4] 

달슈

17.06.130210
141고도몰VS카페24VS메이크샵 어떤게 좋은가요?[8] 

환희씨

17.06.021348
139스토어팜 폰트사이즈 조절[2] 

수성이

17.05.300274
138개인방송국 솔루션 제작[4] 

택배왕김착불

17.05.260364
136오픈마켓 크롤링 하시는 업체 있나요?[2] 

쇼핑왕

17.05.190320
135자사몰 운영하시는 분들의 비율이 어느정도될까요?[5] 

두둠칫두둠칫

17.05.120343
134안녕하세요, 쇼핑몰 솔루션을 환불해 보신 분이 계실까..[3] 

코스모스플랜

17.04.260287
133안녕하세요. 사이트 운영에 도움이 필요해 의견 여쭤봐..[2] 

스텝어라운드

17.04.180285
BEST(html코딩)마케터를 위한 바로가기 버튼 생성법 [8] 

권용범

17.04.11191,370
130기존 쇼핑몰 리뉴얼 관련 질문입니다.[4] 

ajlfdsjl

17.04.030333
129쇼핑몰 홈페이지 자체개발 vs 메이크샵 어떤게?[2] 

무슨상관

17.03.291481
127동영상강좌 1강[4] 

바나로이

17.02.282488
126쇼핑몰제작 추천좀해주세요.[4] 

바나로이

17.02.272467
125[IOS]하이브리드앱 , 웹뷰에 관하여. 

바나로이

17.02.272706
1241.쇼핑몰 솔루션의 선택 !![9] 

바나로이

17.02.2512808
123쇼핑몰 제작 강좌를 진행해보려 합니다[13] 

바나로이

17.02.257418
119다수엑셀파일을 하나로 합치기(무료프로그램)[6] 

전옥철

17.02.165668
118기존 임대몰에서 몰인몰로의 이전 문의드립니다.[5] 

라임엘프

17.02.132365
117모바일에 HTML5 적용하면 문제가 될까요?[2] 

보스톡4

17.02.053326
116파비콘(Favicon) : 웹페이지 상단 탭 아이콘 

나리보스

17.02.014390
BEST카페24 SNS 로그인 연동! 가능합니다![10] 

나리보스

17.01.16142,204
114자사몰 SNS 연동 로그인 기능 문의드립니다.[3] 

CHLOE_SK

17.01.161380
113카페24로 쇼핑몰제작시 페이스북 픽셀[5] 

디스트

17.01.142712
BESTHTML 태그 정리[10] 

나리보스

17.01.13191,430
110크롬 개발자 도구를 사용하여 홈페이지 수정요청하기[4] 

나리보스

17.01.060663
12345 다음 페이지로 이동 마지막 페이지로 이동
top

로그인 후 더욱 많은 기능을 이용하세요!

네이버 계정으로 로그인
페이스북 계정으로 로그인
구글 계정으로 로그인
카카오톡 계정으로 로그인
이메일 또는 아이디로 로그인
X
회원가입ID/PW 찾기 소셜 계정 로그인

전체 알림

모두 읽음 표시 알림함

내 댓글

전체보기

받은 쪽지함

모두 읽음 표시 쪽지함

새로운 쪽지가 없습니다.

쪽지함

스크랩함

전체보기

스크랩한 게시글이 없습니다.

아이보스 추천 게시글을 스크랩 해보세요! 스크랩하기
아이보스 배너광고 영역