Button Transition in SCSS

by Daniel Pegues

HTML

<br/>
<a class="button" href="#" title="" target="_blank"><span>With Span</span></a>
<a class="button" href="#" title="" target="_blank">Without Span</a>

SCSS

.button {
		position: relative;
		margin: 10px;
		padding: 16px 18px;
    display: inline-block;
		color: #fff;
		font-family: Arial, Helvetica, Sans-serif;
		font-size: 1.00rem;
		line-height: 1.35rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		cursor: pointer;
		overflow: hidden;
		border: 0 none;
		background-color: #556f6e;

		-webkit-transition: all 0.20s ease-in-out;
		-moz-transition: all 0.20s ease-in-out;
		-ms-transition: all 0.20s ease-in-out;
		-o-transition: all 0.20s ease-in-out;
		transition: all 0.20s ease-in-out;

		span {
			position: relative;
			z-index: 1;
			font-weight: inherit;
			}

		&::before {}

		&::after {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			display: block;
			width: 4px;
			height: 100%;
			content: ' ';
			background-color: #7cab4c;

			-webkit-transition: all 0.20s ease-in-out;
			-moz-transition: all 0.20s ease-in-out;
			-ms-transition: all 0.20s ease-in-out;
			-o-transition: all 0.20s ease-in-out;
			transition: all 0.20s ease-in-out;
			}

		&:hover {
			&::after {
				width: 100%;
				}
		}
	}