<div>
  <a href="" class="button btn-type-1" data-button-text="Click Me">Click Me</a>
    <a href="" class="button btn-type-1" data-button-text="Or Click Me">Or Click Me</a>
</div>
:root {background-color:#aaaaaa;}

div {display: flex; flex-direction: column; }

a.button {
	display: inline-block;
	padding: 12px;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: all .2s ease-in-out;
	width:200px;
  margin: 10px auto;
}   


a.btn-type-1 { /*hides actual anchor tag*/
  background: transparent;
  color: transparent; 
  position: relative;
  overflow: hidden;
}

	a.btn-type-1::before, a.btn-type-1::after { /*creates and sets pseudo element text to custom data attribute string value*/
		content: attr(data-button-text) "\00A0\00A0\0276F";
		position: absolute;
		top:0;	
		height: 100%;
		font-size: inherit;
		font-weight: inherit;
		line-height: normal;
		transition: width .2s ease-in-out;
		white-space: nowrap;
		box-sizing: border-box;
		overflow: hidden;
	}

	a.btn-type-1::before {
		left:0;
		width:0;
		background-color: white; 
		color: black;
		padding: 12px 0;
		transform-origin: left;
	}

	a.btn-type-1::after { 
		right:0;
		width:100%;
		background-color: black; 
		color: white;
		padding: 12px;	
		transform-origin: right;
	}
        

    a.btn-type-1:hover::before,
    a.btn-type-1:focus::before,
	  a.btn-type-1:active::before {
		width:100%;
		padding: 12px;
	} 

    a.btn-type-1:hover::after,
    a.btn-type-1:focus::after,
	  a.btn-type-1:active::after {
		width:0;
		padding: 12px 0;
	} 
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.