index.html

  <style>
        .styled-button {
            background-color: #FEE500 ;
            border: 0.1rem solid #ccc;
            color: #000000, 90%;
            padding: 1rem 2rem;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 5rem;
          	font-weight: bold;
            cursor: pointer;
            border-radius: 1rem;
            transition: background-color 0.3s;
        }

        .styled-button:hover {
            background-color: #ccc;
            color: #333;
        }

        .styled-button:active {
            background-color: #aaa;
            border-color: #777;
            color: #222;
        }</style>
<div style= "padding: 2.5rem; align: center; margin: auto; text-align: center; justify-content: center; align-items: center;">
  
<p style="font-weight:bold;font-size: 3rem">
  청첩장을 공유하려면 버튼을 눌러주세요<br>
</p>
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
  integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8" crossorigin="anonymous">
  
  </script>
<script>
  Kakao.init('10b7d849b50944e0075f12ef740c7102'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<button id="kakaotalk-sharing-btn1" type="button" class="styled-button" ">신랑측 공유하기</button>
<button id="kakaotalk-sharing-btn2" type="button" class="styled-button" ">신부측 공유하기</button>
 
</div>
<script>
  Kakao.Share.createCustomButton({
    container: '#kakaotalk-sharing-btn2',
    templateId: 103693,
  });
</script>

<script>
  Kakao.Share.createCustomButton({
    container: '#kakaotalk-sharing-btn1',
    templateId: 104188,
  });
</script>