[소스] HTML 버튼 양식 #1

HTML 버튼 양식 #1번 소스 


<div class="text-center1" data-v-0d46030a="" style="background-color: white; color: #2c3e50; font-family: &quot;SF Pro KR&quot;, &quot;SF Pro Text&quot;, &quot;SF Pro Icons&quot;, &quot;Apple Gothic&quot;, &quot;HY Gulim&quot;, MalgunGothic, &quot;HY Dotum&quot;, &quot;Lexi Gulim&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 17px; text-align: center; word-break: keep-all;">

  <h2 data-v-0d46030a="" id="firstlevel-header" style="color: #111111; font-family: &quot;SF Pro Display&quot;, &quot;SF Pro Icons&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 24px; letter-spacing: 0.011em; margin: 15px 0px; outline-offset: 1px; outline: none; padding: 5px 0px 0px; word-break: keep-all;" tabindex="0">간단한 리스트형 버튼양식 메인제목 작성부입니다.</h2>

</div>


<ul aria-label="간단한 리스트형 버튼양식 메인제목 작성부입니다." data-v-0d46030a="" role="list" style="background-color: white; color: #2c3e50; font-family: &quot;SF Pro KR&quot;, &quot;SF Pro Text&quot;, &quot;SF Pro Icons&quot;, &quot;Apple Gothic&quot;, &quot;HY Gulim&quot;, MalgunGothic, &quot;HY Dotum&quot;, &quot;Lexi Gulim&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 17px; list-style: none; margin: 0px; padding: 0px; word-break: keep-all;">

  <li class="support-divider" data-v-0d46030a="" role="listitem" style="border-bottom: 1px solid rgb(214, 214, 214); font-size: 14px; list-style: none; margin: 10px; padding: 0px; word-break: keep-all;">

    <div class="button-container" style="word-break: keep-all;">

      <div style="word-break: keep-all;"><h3 style="color: #111111; font-size: 15px; margin: 0px; padding: 0px; word-break: keep-all;">1번 서브 제목을 작성합니다.</h3>

        <div class="no-margin" style="margin: 0px; word-break: keep-all;">1번 서브 제목의 상세내역을 작성하는 부분입니다.</div>

        <div class="row text-right" style="margin: 5px 0px; position: relative; text-align: center; word-break: keep-all; z-index: 1;">

          <button class="button buttonLan support-button form-button1" style="-webkit-font-smoothing: antialiased; background-attachment: initial; background-clip: initial; background-image: linear-gradient(rgb(66, 161, 236), rgb(0, 112, 201)); background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: rgb(0, 119, 204); border-radius: 4px; border-style: solid; border-width: 1px; color: white; cursor: pointer; direction: ltr; font-family: &quot;SF Pro KR&quot;, &quot;SF Pro Text&quot;, &quot;SF Pro Icons&quot;, &quot;Apple Gothic&quot;, &quot;HY Gulim&quot;, MalgunGothic, &quot;HY Dotum&quot;, &quot;Lexi Gulim&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-size: 17px; font-stretch: inherit; font-style: normal; font-synthesis: none; font-variant: inherit; font-variation-settings: inherit; font-weight: 400; letter-spacing: 0em; line-height: 1.61765; margin: 5px 0px 15px; min-width: 30px; overflow: visible; padding: 10px 15px; text-wrap: nowrap; vertical-align: inherit; width: 350px; word-break: keep-all;" onclick="location.href='https://www.koreagen.com' ">

1번 링크 버튼입니다.</button>

        </div>

      </div>

    </div>

  </li>

  <li class="support-divider" data-v-0d46030a="" role="listitem" style="border-bottom: 1px solid rgb(214, 214, 214); font-size: 14px; list-style: none; margin: 10px; padding: 0px; word-break: keep-all;">

  <div class="button-container" style="word-break: keep-all;">

    <div style="word-break: keep-all;">

      <h3 style="color: #111111; font-size: 15px; margin: 0px; padding: 0px; word-break: keep-all;">2번 서브 제목을 작성합니다.</h3>

      <div class="no-margin" style="margin: 0px; word-break: keep-all;">2번 서브 제목의 상세내역을 작성하는 부분입니다.</div>

      <div class="row text-right" style="margin: 5px 0px; position: relative; text-align: center; word-break: keep-all; z-index: 1;">

        <button class="button buttonLan support-button form-button1" style="-webkit-font-smoothing: antialiased; background-attachment: initial; background-clip: initial; background-image: linear-gradient(rgb(66, 161, 236), rgb(0, 112, 201)); background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: rgb(0, 119, 204); border-radius: 4px; border-style: solid; border-width: 1px; color: white; cursor: pointer; direction: ltr; font-family: &quot;SF Pro KR&quot;, &quot;SF Pro Text&quot;, &quot;SF Pro Icons&quot;, &quot;Apple Gothic&quot;, &quot;HY Gulim&quot;, MalgunGothic, &quot;HY Dotum&quot;, &quot;Lexi Gulim&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-size: 17px; font-stretch: inherit; font-style: normal; font-synthesis: none; font-variant: inherit; font-variation-settings: inherit; font-weight: 400; letter-spacing: 0em; line-height: 1.61765; margin: 5px 0px 15px; min-width: 30px; overflow: visible; padding: 10px 15px; text-wrap: nowrap; vertical-align: inherit; width: 350px; word-break: keep-all;"  onclick="location.href='https://www.koreagen.com' ">

2번 링크 버튼입니다.</button>

      </div>

    </div>

    </div>

  </li>

  <li class="support-divider" data-v-0d46030a="" role="listitem" style="border: none; font-size: 14px; list-style: none; margin: 10px; padding: 0px; word-break: keep-all;">

    <div class="button-container" style="word-break: keep-all;">

      <div style="word-break: keep-all;">

        <h3 style="color: #111111; font-size: 15px; margin: 0px; padding: 0px; word-break: keep-all;">3번 서브 제목을 작성합니다.</h3>

        <div class="no-margin" style="margin: 0px; word-break: keep-all;">3번 서브 제목의 상세내역을 작성하는 부분입니다.</div>

        <div class="row text-right" style="margin: 5px 0px; position: relative; text-align: center; word-break: keep-all; z-index: 1;">

          <button class="button buttonLan support-button form-button1" style="-webkit-font-smoothing: antialiased; background-attachment: initial; background-clip: initial; background-image: linear-gradient(rgb(66, 161, 236), rgb(0, 112, 201)); background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-color: rgb(0, 119, 204); border-radius: 4px; border-style: solid; border-width: 1px; color: white; cursor: pointer; direction: ltr; font-family: &quot;SF Pro KR&quot;, &quot;SF Pro Text&quot;, &quot;SF Pro Icons&quot;, &quot;Apple Gothic&quot;, &quot;HY Gulim&quot;, MalgunGothic, &quot;HY Dotum&quot;, &quot;Lexi Gulim&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-size: 17px; font-stretch: inherit; font-style: normal; font-synthesis: none; font-variant: inherit; font-variation-settings: inherit; font-weight: 400; letter-spacing: 0em; line-height: 1.61765; margin: 5px 0px 15px; min-width: 30px; overflow: visible; padding: 10px 15px; text-wrap: nowrap; vertical-align: inherit; width: 350px; word-break: keep-all;" onclick="location.href='https://www.koreagen.com' ">

3번 링크 버튼입니다.</button>

        </div>

      </div>

    </div>

  </li>

</ul>

<div><br /></div>









댓글 쓰기

여러분의 소중한 의견과 응원을 주시면 저에게 많은 도움이 됩니다.