ボタン画像の外側にはみ出すボタンを画像に合わせたいです。

該当部分はHTMLの<button>タグの部分です。
画面移動の際に、ポップアップで出現するボタンのコードを書いているのですが、付属画像のようにボタンの横幅だけ大きくなるのですが、これを緑の画像に合わせたいのですが上手くいきません。

ボタンの幅 .auto-style4のwidthを縮小させると、画像まで縮小されてしまいます。
また、<button>の上下にclassを作って、調節していたのですが、このコードの配置の場合はそのやり方が使えません。

下記のURLは実際のサイトです。
https://rensyuu12.tokyo/PHPMailer/buttonsitumon.html
付属画像
イメージ説明

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ポップアップ</title>
 
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="buttonsitumon.css">
  <style>

  </style>
</head>
<body>
 

    <div class="popup" id="js-popup">
        <div class="popup-inner">
            <div id="close-btn1" class="close-btn1">&#10006;</div>  
          <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div>
          <img src="bbb.png" alt="ポップアップ画像" class=" examplepopwindow001">
          
          <button type="submit" id="soushin3" name="submit" class="auto-style4" value="submit">
<img src="ccc.png" alt="確認画面へ" class="example8"/>
</button>
         
          
        </div>
        <div class="black-background" id="js-black-bg"></div>
      </div>  
    
      


<script>

window.onload = function() {
  var popup = document.getElementById('js-popup');
  if(!popup) return;
  popup.classList.add('is-show');

  

  var blackBg = document.getElementById('js-black-bg');
  var closeBtn = document.getElementById('js-close-btn');

  closePopUp(blackBg);
  closePopUp(closeBtn);
  

  function closePopUp(elem) {
    if(!elem) return;
    elem.addEventListener('click', function() {
      popup.classList.remove('is-show');
    })
  }
}

</script>

</body>
</html>

buttonsitumon.css

css
* {
  box-sizing: border-box;
}

.popup {
  
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .6s;
  }
  .popup.is-show {
    opacity: 1;
    visibility: visible;
  }
  /* 表示画像のスタイル */
  .popup-inner {
    
    text-align: center;
    margin: auto;
    
    width: 100%;
    height: 90%;
  
    
    padding: 70px;
    background-color: rgb(49, 194, 239);
    z-index: 2;
  }
  /* 表示画像のスタイル */
  .popup-inner img {
    width: 100%;
    vertical-align: bottom;
    
    
  }
  /* 閉じボタンをクリックすると閉じるイベントを発動する領域（&#10006;ボタンの部分に領域してい */
  .close-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
  }
  /* 閉じボタンのスタイル */
  .close-btn i {
    font-size: 20px;/* 閉じボタンの大きさ */
    color: #333;/* 閉じボタンの色 */
  }
/* 閉じボタンのスタイル */
  .close-btn1 {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
  }
 
  .black-background {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
    z-index: 1;
    cursor: pointer;
  }
  
  
  img.examplepopwindow001{

  
    height: 260px;
    width: 64%;
    margin-bottom: -1px;/* 下余白vertical-align: bottom;効かない */
    
  }
  
   /* ボタン代替え画像の大きさ調節 */
 img.example8 {
	width: 80%;/* ボタン枠に収める */
	height: 80%;/* ボタン枠に収める */
	background-size: 100% 100%;
  text-align: center; 
 
  }
  
  /* 送信ボタンの大きさ、スタイル */
  .auto-style4 {
  
  height: 80%; 
  width: 80%;
  padding: 0;
  text-align: center;
  
  }