Untitled

dabblet.css

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

.b-button-wrap__bg 
{
	background:#ccc;
}

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

.b-button 
{
	font: 11px/20px Verdana, sans-serif;
	position:relative;

	display: inline-block;

	padding: 1px;

	vertical-align: top;
	text-decoration: none; 
	text-align: center;

	color: #000;
	border-radius: 6px;
	background: linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.35) 100%);
}

a.b-button 
{
    text-decoration: none;
}

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


.b-button:active 
{
	background: linear-gradient(top,  rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.1) 100%); /* W3C */
	box-shadow:none;
	text-decoration: none;
}

.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">
		<div class="b-button__inner">Кнопка ссылкой</div>
	</a> 
</div>

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

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

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

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

	<span class="b-button b-button_display_inline">
		<span class="b-button__inner">
			<input class="b-button__input" type="submit" value="Кнопка в inline блоке">
			Кнопка в 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"}