JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <div class="center-wrapper">
        <div class="center">
            <p>Button looks rubbish with the left hand border, hover over it and it doesn't fill edge in Chrome - Button broken</p>
            <a href="#" class="btn" title="#" data-text="Click here"><span>Click here</span></a>
        </div>
    </div>
</div>

<div class="normal-block">
    Button looks rubbish with the left hand border, hover over it and it doesn't fill edge in Chrome - Therefore still broken
    <a href="#" class="btn" title="#" data-text="Click here"><span>Click here</span></a>
</div>

<div class="normal-block yellow">
    Button appears fine
    <a href="#" class="btn" title="#" data-text="Click here"><span>Click here</span></a>
</div>

CSS

html, body { height:100%;}

.block {
    height: 500px;
    width: 100%;
    background: pink;
    text-align: center;
    position:relative;
}

.normal-block { 
    margin: 30px 0;
        padding: 30px 0;
    overflow:hidden;
    position: relative;
    background: aqua;
    text-align:center;
}

.yellow {
    background: yellow;
}

/* @group Center all the things */

	.center-wrapper {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

		.center-wrapper .center {
			position: relative;
			overflow: hidden;
			top: 50%;
			-webkit-transform: translateY(-50%);
			    -ms-transform: translateY(-50%);
			        transform: translateY(-50%);


							/* This fixes the blurred buttons but breaks centering

							-webkit-backface-visibility: hidden;
											backface-visibility: hidden;

											transform: translateZ(0);*/
		}

	/* @end */




.btn,
	.btn:visited,
	input.wpcf7-submit {

		display: inline-block; /* can't change to block because I need the width to match that of the content and not be 100% */
		margin: 0 auto;

		font-style: italic;
		font-size: 16px;
		color: #111;
		position: relative;
		line-height: 2.4em;
		overflow: hidden;
		padding: 0 25px;
		border: 1px solid #111;
		background: none;
		vertical-align: middle;
		position: relative;
		z-index: 1;

		-webkit-backface-visibility: hidden;
				  backface-visibility: hidden;

		transform: translateZ(0);
	}

	.btn:focus {		outline: none;	}
	.btn > span {	vertical-align: middle; display: block;	}

	.btn::before {
		content: attr(data-text);
		position: absolute;
		top: 0;
		left: -1px;
		width: 101%;
		height: 100%;
		color: #fff;
		text-align:center;
		background: #111;
		line-height: 2.4em;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	.btn::before,
	.btn > span {
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		-webkit-transition-timing-function:...