<!-- :default -->
<section class="example-cntr default">
    <h1>CSS <code>:default</code> pseudo-class</h1>
    <p>The <code>:default</code> pseudo-class will target the default element in a form in a group of similar elements. </p>
    <p>In case you need to target the default button in a form that does not have a class, you can use the <code>:default</code> pseudo-class.</p>
            <input type="text" id="name">
        <a href="#">Cancel</a>
        <button type="reset">Reset</button>
        <button type="submit">Register</button>
        <small>I used a "Reset" button for demostration purposes only.</small>
    <p>"Reset" or "Clear" buttons in forms have serious usability issues. Avoid using them unless is strictly necessary. Here are some notes about why not to use them:</p>    
        <li><a href="https://www.nngroup.com/articles/reset-and-cancel-buttons/" target="_blank" title="Link opens in a new tab">Reset and Cancel Buttons</a> - Nielsen Norman Group (2000)</li>
        <li><a href="http://uxmovement.com/forms/killing-the-cancel-button-on-forms-for-good/" target="_blank" title="Link opens in a new tab">Killing the Cancel Button on Forms for Good</a> - UX Movement (2010)</li>
$r: #c03;
$g: #429032;
$b: #2963BD;
$y: #c90;

//Target the default action on the form
:default {
    padding: 5px 35px;
    color: white;
    background: $g;
:default:hover {
    background: darken($g,20);

//Styling stuff not needed for demo
body { text-align: left; }
.example-cntr {
    max-width: 800px;
    margin: auto;
    padding: 20px 50px;    
    box-shadow: 0 1px 2px rgba(black,.3);
    background: rgba(black,.15);    
h1 { 
    text-transform: none;
    border-bottom: #636363 1px dotted;
    code {
        display: inline-block;
        margin-bottom: 10px;
        color: $y;
        background: none;
        box-shadow: none;
code { font-size: 1em; }
form {
    width: 400px;
    margin: 40px auto;
    padding: 20px;
    border-radius: 2px;
    text-align: right;
    font-size: 22px;
    background: rgba(black,.2);
    small {
        display: block;
        margin-top: 30px;
        font-size: 12px;
        text-align: center;
        color: #999;
label {
    display: block;
    margin-bottom: 20px;
    text-align: left;
    cursor: pointer;
input {
    width: 100%;
    margin-top: 5px;
    padding: 5px;
    font-size: 1em;
button {
    padding: 5px 20px;
    margin-left: 20px;
    font:bold  1em 'Source Sans Pro', Arial, Helvetica, sans-serif;    
    border: 3px solid rgba(black,.5);
    border-radius: 2px;
    cursor: pointer;
    transition: .3s;
    &:hover {
       background: #999;
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/codepen-base_3.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.