소셜로그인 중단 안내

계정으로 로그인 기능이 2023년 11월 16일 중단되었습니다.

아이보스 계정이 사라지는 것은 절대 아니며, 계정의 이메일 주소를 이용해 로그인 하실 수 있습니다.

▶️ 자세한 공지사항 확인

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

2017.04.11 17:17

권용범

조회수 4,985

댓글 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명이 좋아합니다.

목록글쓰기
댓글 8
댓글 새로고침
로그인 후 더욱 많은 기능을 이용하세요!아이보스 로그인