할 수 있는 일

HTML

 <dialog id="dialog" class="dialog_style" >
                        「ダイアログの中身の文章（任意）」
 　 <button class="form__btn" onclick="document.getElementById('dialog').close();">
                       「ダイアログの中身にあるボタンの文章（任意）」
   </button>
 </dialog>

<button class="form__btn" onclick="document.getElementById('dialog').show();">
                    「クリックするとダイアログが表示されるボタンの文章（任意）」
                    </button>

CSS

.dialog_style{ 
margin-left: 300px;
width: 1000px;
height: 500px;
border: 5px solid #b84c00;
border-radius: 10px;
}

.form__btn{
 〜省略〜
}

.form__btn:hover {
〜省略〜
}