Making a read more link overlap widget area.

morelink.html

<style>
.morelink {
  bottom: -13px;
	left: -10px;
	line-height: 1;
	position: absolute;
}

.morelink a:before {
	background: url(triangle-background-image.png) no-repeat 0 0;
	content: "";
	height: 12px;
	left: 0;
	position: absolute;
	top: -12px;
	width: 10px;
}

.morelink a {
	background: url(link-button-background-image.png) no-repeat right center;
	color: #fff;
	display: block;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 700;
	min-width: 185px;
	padding:  3px 24px 4px 32px;
	padding:  0.1875rem 1.5rem 0.25rem 2rem;
	text-decoration: none;
}
</style>


<span class="morelink">
  <a href="#">Link Text</a>
</span>