<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

    padding: 1.5rem;
    background-color: #333;
    color: #fff;
    margin: 2rem 0;
    border: 0;
    border-radius: 0.3rem;
    width: 100%;


development only style sheet


    outline: 4px solid red;
    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.