<h1>Hover on button</h1>
<div>
  <div class="social-button-wrapper">
    <a href="#" class="social-button">
      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;" xml:space="preserve">
        <path id="f_1_" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z"/>
    </a>
  </div>
</div>

/* ===================== 
Button styles 
===================== */

@mixin border() {
	content: " ";
	position: absolute;
	height: 2px;
	width: 30%;
	background: #C71F39;
	transition: all 0.4s;
}

@mixin border-top-rotated() {
	@include border();
	transform: rotate(90deg);
	transform-origin: 0%;
}

@mixin border-bottom-rotated() {
	@include border();
	transform: rotate(90deg);
	transform-origin: 100%;
}

path {
	fill: #ffffff;
}

.social-button-wrapper {
	position: relative;
	&:before {
		@include border();
		right: 0;
		bottom: 0;
	}
	&:after {
		@include border-bottom-rotated();
		right: 0;
		bottom: 0;
	}

	&:hover {
		.social-button {
			background: #345498;
			border-color: #345498;
		}
		&:before {
			width: calc(100% + 1px);
			background: #345498;
		}
		&:after, *:before, *:after {
			width: calc(100% + 2px);
			background: #345498;
		}
	}
}

.social-button {
	transition: all 1s;
	padding: 10px 10px;
	width: 61px;
	display: block;
	position: relative;
	&:before {
		left: -1px;
		top: 0;
		@include border();
	}
	&:after {
		left: 0%;
		top: 0%;
		@include border-top-rotated();
	}
	
	svg {
		position: relative;
		top: 2px;
	}
	
}

/* ===================== 
Demo styles 
===================== */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1d1254;
	height: calc(100vh - 18px);
	flex-direction: column;

	h1 {
		font-family: sans-serif;
		color: #ffffff;
	}

	& > * {
		flex: 1;
	}
	& > div {
		flex: 2;
		align-items: baseline;
	}
}