Ruslan2230
6/3/2018 - 1:34 PM

Parallelograms — with extra HTML element

Parallelograms — with extra HTML element

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<a href="#yolo" class="button"><div>Click me</div></a>
<button class="button"><div>Click me</div></button>
/**
 * Parallelograms — with extra HTML element
 */
 
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }

.button {
	display: inline-block;
	padding: .5em 1em;
	border: 0; margin: .5em;
	background: #58a;
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font: bold 200%/1 sans-serif;
}