Untitled

dabblet.css

.b-button-wrap 
{
	display: inline-block;
	vertical-align: top;
	padding: 18px;
}

.b-button-wrap__bg 
{
	position: relative;
	z-index: 1;

	background: red;
}

.b-button-wrap_size_big .b-button__inner 
{
	font-size: 18px;
}

.b-button
{
	font: 11px Verdana, sans-serif;

	position: relative;
	
	padding: 2px 13px;
	margin: 0 5px;	

	cursor: pointer;
	white-space:nowrap;

	user-select: none;
	color: #000;
	text-decoration: none; 
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	border-radius: 6px;
	background: linear-gradient(top, #f2f2f2 30%, #e2e2e2 70%);
}

.b-button:hover 
{
       text-decoration: none;
   
       background: linear-gradient(top,  rgba(253,255,204,1) 30%,rgba(254,255,235,1) 70%); 
}

.b-button:active 
{
	text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7);
        box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.26);
 	background: linear-gradient(top, #f2f2f2 30%, #e2e2e2 70%);
}

.b-button:active .b-button__text
{
	position: relative;
	top: 1px;
}


.b-button:before 
{
	position: absolute;
	left: -1px;
	top: -1px;
	right: -1px;
	bottom: -1px;
	z-index: -1;


	content: '';
	border-radius: 7px;
	background: linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.35) 100%);
}

.b-button:active:before
{
	background: linear-gradient(bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.35) 100%);
} 


.b-button:focus
{
    outline: none;
    box-shadow: 0 0 4px rgba(0,35,214,0.94)
}

.b-button__input 
{
	position: absolute;
	top:0;
	left:0;
	z-index: 3;
	
	visibility:hidden;

	width:100%;
	height:100%;
	
	border: none;
	cursor: pointer;
}

dabblet.html

<div class="b-button-wrap">
	<a href="#link" class="b-button">
		<span class="b-button__text">Кнопка ссылкой</span>
	</a> 
</div>

<div class="b-button-wrap  b-button-wrap__input"> 
	<span class="b-button">
		<input class="b-button__input" type="submit" value="Кнопка">
		<span class="b-button__text">Кнопка с input</span>
	</span>
</div>

<div class="b-button-wrap  b-button-wrap__bg"> 
	<span class="b-button">
		<input class="b-button__input" type="submit" value="Кнопка">
	      	<span class="b-button__text">Кнопка</span>
	</span>
</div>

<div class="b-button-wrap  b-button-wrap_input b-button-wrap_size_big">
	<span class="b-button">
      		<input class="b-button__input" type="submit" value="Кнопка по длинее">
		<span class="b-button__text">Кнопка длиннее</span>
	</span>
</div>

<p>
	In reprehenderit in voluptate ut aliquip ex ea commodo 

	<span class="b-button b-button_display_inline">
		<input class="b-button__input" type="submit" value="Кнопка в inline блоке">
		<span class="b-button__text">кнопка в inline блоке</span>
	</span>

	consequat. Ut labore et dolore magna aliqua. Cupidatat non proident, ullamco laboris nisi velit esse cillum dolore.
</p>

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}