JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<a href="" class="button">
	<i></i><i></i><i></i><i></i>
	Все статьи
</a>

SCSS

.button {
	height: 40px;
	padding: 0 30px;
	line-height: 40px;
	position: relative;
	background: none;
	border: 0;
	color: #777;
	font-size: 15px;
	overflow: hidden;
	display: inline-block;
	text-decoration: none;

	&:before, &:after {
		content: "";
		position: absolute;
		border-style: solid;
		border-color: #777;
	}
	
	&:before {
		left: 0;
		top: 5px;
		right: 0;
		bottom: 5px;
		border-width: 0 1px;
	}

	&:after {
		border-width: 1px 0;
		left: 5px;
		top: 0;
		right: 5px;
		bottom: 0;
	}
	
	i {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		position: absolute;
		display: inline-block;
		border: 1px solid #777;

		&:nth-child(1) {
			left: -6px;
			top: -6px;
		}
		
		&:nth-child(2) {
			right: -6px;
			top: -6px;
		}
		
		&:nth-child(3) {
			right: -6px;
			bottom: -6px;
		}
		
		&:nth-child(4) {
			left: -6px;
			bottom: -6px;
		}
	}
	
	&:hover {
		color: #f00;

		&:before, &:after, i {
			border-color: #f00;
		}
	}
}