• HTML
• CSS

HTML

<!-- Boton-->
<div class="boton-modal">
    <label for="btn-modal">
        Abril Modal
    </label>
</div>
<!--Fin de Boton-->

<!--Ventana Modal-->
<input type="checkbox" id="btn-modal">
<div class="container-modal">
    <div class="content-modal">
        <h2>¡Bienvenido!</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur, nostrum!</p>
        <div class="btn-cerrar">
            <label for="btn-modal">Cerrar</label>
        </div>
    </div>
    <label for="btn-modal" class="cerrar-modal"></label>
</div>
<!--Fin de Ventana Modal-->

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Open Sans',sans-serif;
}
body{
    background:#efefef;
}
/*:::Boton Modal:::*/
.boton-modal{
    padding:40px;
    background-color:#fff;
}
.boton-modal label{
    padding:10px 15px;
    background-color:#5488a3;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    transition:all 300ms ease;
}
.boton-modal label:hover{
    background-color:#185E83;
}
/*:::Fin Boton Modal:::*/


/*:::Ventana Modal:::*/
#btn-modal{
    display:none;
}
.container-modal{
    width:100%;
    height:100vh;
    position:fixed;
    top:0; left:0;
    background-color:rgba(144,148,150,0.8);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:100;
}
#btn-modal:checked ~ .container-modal{
    display:flex;
}
.content-modal{
    width:100%;
    max-width:400px;
    padding:20px;
    background-color:#fff;
    border-radius:4px;
}
.content-modal h2{
    margin-bottom:15px;
}
.content-modal p{
    padding:15px 0px;
    border-top:1px solid #dbdbdb;
    border-bottom:1px solid #dbdbdb;
}
.content-modal .btn-cerrar{
    width:100%;
    margin-top:15px;
    display:flex;
    justify-content:flex-end;
}
.content-modal .btn-cerrar label{
    padding:7px 10px;
    background-color:#5488a3;
    color:#fff;
    border-radius:4px;
    cursor:pointer;
    transition:all 300ms ease;
}
.content-modal .btn-cerrar label:hover{
    background-color:#185E83;
}
.cerrar-modal{
    width:100%;
    height:100vh;
    position:absolute;
    top:0; left:0;
    z-index:-1;
}
@media screen and (max-width:800px){
    .content-modal{
        width:90%;
    }
}
/*:::Fin de Ventana Modal:::*/

/* All credits to: https://www.youtube.com/watch?v=rm7bOdKaSys */