JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="background-line">
    <a href="#">Mi boton</a>
</div>

CSS

.background-line{
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	background-image:linear-gradient(bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 100%);
	-webkit-background-size:100% 2px;
	-moz-background-size:100% 2px;
	background-size:100% 2px;
	background-position: center center;
	background-repeat: no-repeat;
	height: 35px;
}
a{
		font-family: Serif;
		display: block;
		max-width:200px;
		height: 35px;
		line-height: 35px;
		color:white;
		font-weight: bolder;
		text-align: center;
		text-transform: uppercase;
		background-color: aqua;
		margin: 0 auto;
		border-left: 10px solid rgba(255,255,255,1);
		border-right: 10px solid rgba(255,255,255,1);
		-webkit-background-clip(padding-box);
		-moz-background-clip(padding-box);
		background-clip(padding-box);
		text-decoration: none;

	}