Moving Line Buttons

index.html

<button class="btn">
  Moving Line Button
</button>

<div></div>
<button class="btn btn--2">
  2-Moving Lines Button
</button>

Moving Line Buttons.markdown

Moving Line Buttons

A Pen by xiel on CodePen.

License.

style.css

body {
  font: sans-serif 1rem;
  background: #333;
  text-align: center;
}

.btn {
	position: relative;
	display: inline-block;
	background: transparent;
	margin: 20px auto;
	padding: 1em 2em;
	min-width: 20em;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .05em;
	border: 0 none;
	text-transform: uppercase;
	cursor: pointer;
	transition: 700ms;
	box-shadow: inset 0 0 0 2px #666;
	

	&:after {
    position: absolute;
		content: '';
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		border: solid #fff;
		border-width: 2px 0 0 2px;
		transition: width 300ms 0ms, height 100ms 500ms;
	}

	&:before {
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		width: 0%;
		height: 0%;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transition: width 300ms 0ms, height 100ms 500ms;
	}

	&:hover, &:focus {
		color: #fff;
		background: rgba(#333, .1);

		&:after {
			width: 0;
			height: 0;
			transition: height 100ms 0ms, width 500ms 100ms;
		}

		&:before {
			width: 100%;
			height: 100%;
			transition: height 100ms 0ms, width 500ms 100ms;
		}
	}
}

.btn--2 {
	&:after {
		position: absolute;
		content: '';
		top: 0;
		right: 0;
		width: 100%;
		height: 0%;
		border: solid #fff;
		border-width: 2px 2px 0 0;
		transition: 250ms;
	}

	&:before {
		position: absolute;
		content: '';
		left: 0;
		top: auto;
		bottom: 0;
		width: 0%;
		height: 100%;
		border: solid #fff;
		border-width: 0 0 2px 2px;
		transition: 250ms;
	}

	&:hover, &:focus {

		&:after {
			width: 0;
			height: 100%;
			transition: 250ms;
		}

		&:before {
			width: 100%;
			height: 0%;
			transition: 250ms;
		}
	}
}

*, *:before, *:after {
    box-sizing: border-box;
    outline: 0 none;
}