<h1>Using CSS to prevent HTML Errors: buttons</h1>

<button class="btn">a working REAL button</button>

<div class="btn">A fake button that gets no styles</div>

/*

production (and development) style sheet

*/
button.btn{
    padding: 1.5rem;
    background-color: #333;
    color: #fff;
    margin: 2rem 0;
    border: 0;
    border-radius: 0.3rem;
    width: 100%;
}

/*

development only style sheet

*/

.btn:not(button){
    outline: 4px solid red;
}
.btn:not(button):after{
    content: "Use a <button> you donut!";
    position: absolute;
    background: darkmagenta;
    color: #fff;
    padding: 1rem;
    transform: translate(-50%, 25%);
    border: 5px solid #fff;
}