Light button

dabblet.css

/* Light button */

.button {
    font: 13px/1.2 "Helvetica Neue", Arial, sans-serif;
    
    display: inline-block;
    overflow: hidden; /* Otherwise the adjusting inline blocks would jump on baseline change */
    vertical-align: middle; /* Or find a better va */
    
    padding: 1px 8px;

    border: 1px solid;
    border-color: #DDD #BBB #999;
    border-color: rgba(192,192,192,.6) transparent rgba(48,48,48,.5);
    
    text-decoration: none;
    cursor: pointer;
    
    color: #000;
    background: #EEE;
    background:
      linear-gradient(top,rgba(255,255,255,.9),rgba(184,184,184,.66)),
      linear-gradient(top,rgba(192,192,192,.6),rgba(53,53,53,.5)),
      linear-gradient(top,rgba(192,192,192,.6),rgba(53,53,53,.5)) 100% 0;
    background-repeat: no-repeat;
    background-size: 100% 100%, 1px 100%, 1px 100%;
    background-origin: padding-box, border-box, border-box;

    border-radius: 3px;
    text-shadow: 0 1px rgba(255,255,255,.7);
    user-select: none;
    }
    
.button:hover {
    border-color: rgba(150,150,150,.4) transparent rgba(49,49,49,.5);
    background-image:
      linear-gradient(top,
        rgba(255,255,255,.9)    0,
        rgba(206,206,206,.66)  59%,
        rgba(173,173,173,.66)  87%,
        rgba(255,255,255,1)   100%),
      linear-gradient(top,rgba(150,150,150,.4),rgba(49,49,49,.5)),
      linear-gradient(top,rgba(150,150,150,.4),rgba(49,49,49,.5));
    }

.button:active {
    padding: 2px 8px 0;
    
    border-color: rgba(91,91,91,.6) transparent rgba(109,109,109,.4);
    background-image:
      linear-gradient(top,rgba(216,216,216,.66),rgba(251,251,251,.8)),
      linear-gradient(top,rgba(91,91,91,.6),rgba(109,109,109,.4)),
      linear-gradient(top,rgba(91,91,91,.6),rgba(109,109,109,.4));
      box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
    }
.button:focus {
    outline: 0;
    box-shadow: 0 0 3px 1px rgba(255,229,131,.8);
    }
.button:focus:active {
    box-shadow: inset 0 1px 4px rgba(0,0,0,.4), 0 0 3px 1px rgba(255,229,131,.8);
    }

dabblet.html

<a class="button" href="#" tabindex="-1">Готово</a> 

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}