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

<button>a real button without a class</button>

<button class="btn">a real button with the .btn class</button>

<a class="btn" href="https://dev.to/inhuofficial/">An anchor styled like a button</a>

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

/*

production (and development) style sheet

*/

button,
a.btn{
    padding: 1.5rem;
    background-color: #333;
    color: #fff;
    margin: 2rem 0;
    border: 0;
    border-radius: 0.3rem;
    width: 100%;
    display: block;
    text-decoration: none;
    box-sizing:border-box;
}


/*

development only style sheet

*/


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

External CSS

  1. https://codepen.io/inhuofficial/pen/1f2fdcebd949827fda87fd82f8f0096c.css

External JavaScript

This Pen doesn't use any external JavaScript resources.