<div class="container">
	     <h1>button library</h1>
	     <br>
       <button class="button button--full-bg"> full-bg </button> 
       <button class="button button--bottom-right-border"> bottom-right-border </button>
       <button class="button button--bottom-top-border"> bottom-top-border </button>
       <button class="button button--crossover-border"> crossover-border </button>  
       <button class="button button--inner-shadow-border"> inner-shadow-border </button>
       <button class="button button--bg-slide-right"> bg-slide-right </button>
       <button class="button button--bg-slide-right-angle"> bg-slide-right-angle </button> 
       <button class="button button--bg-meet-in-middle"> bg-meet-in-middle </button> 
       <button class="button button--rounded-corners-border"> rounded-corners-border </button> 
       <button class="button button--bg-top-to-bottom"> bg-top-to-bottom </button> 
	 <small>Library provided by <strong>Adam lancey</strong> Front End Web Developer</small>
</div>

$dark-color : #000;
html{
	background-color: darken(teal, 5%);
	color: white;
	font-family: sans-serif;
}
.container{
	max-width: 1400px;
	margin: 30px auto;
	background-color: darken(teal, 5%);
	text-align: center;
	padding: 30px;
	small{
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}
}

h1{
	color: white;
	text-transform: capitalize;
	font-family: sans-serif;
	position: relative;
	display: inline-block;
	margin-bottom: 40px;
	&::before{
		content: "";
		height: 2px;
		background-color: white;
		width: 80%;
		position: absolute;
		left :50%;
		transform: translateX(-50%);
		top: 110%;
	}
	&::after{
		content: "";
		height: 2px;
		background-color: white;
		width: 40%;
		position: absolute;
		left :50%;
		transform: translateX(-50%);
		top: 140%;
	}
}

.button{
	padding: 20px;
	font-size: .7vw;
	border: none;
	color: #fff;
	background-color: transparent;
	cursor: pointer;
	margin: 10px;
	transform: translateY(0px);
	transition: transform .3s;
	&:focus,
	&:active {
		outline: none;
		transform: translateY(-3px);
	}
	 /* Full bg button */
	&--full-bg{
		background-color: #fff;
		color: $dark-color;
		transition-property: background-color, color,border;
		border: 3px solid transparent;
		transition-duration: .4s;
		&:hover{
			background-color: transparent;
			color: #fff;
			border: 3px solid #fff;
		}
	}
	/* Border bottom and right button */
	&--bottom-right-border{
		position: relative;
		&::before{
			content: "";
			height: 2px;
			width:0%;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			right: 0;
			transition: width .3s;
		}
		&::after{
			content: "";
			height: 0%;
			width:2px;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			right: 0;
			transition: height .3s;
		}
		&:hover{
			&::before{
				width: 100%;
			}
			&::after{
				height: 100%;
			}
		}
	}
	/* Border bottom and top button */
	&--bottom-top-border{
		position: relative;
		letter-spacing: 0px;
		transition-property: transform, letter-spacing;
		transition-duration: .3s;
		&::before{
			content: "";
			height: 2px;
			width: 0%;
			position: absolute;
			bottom: 0;
			right: 0;
			background-color:#fff;
			transition: width .3s;
		}
		&::after{
			content: "";
			height: 2px;
			width: 0%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #fff;
			transition: width .3s;
		}
		&:hover{
			transform: translateX(2px);
			letter-spacing: 2px;
			&::before{
				width: 100%;
			}
			&::after{
				width: 100%;
			}
		}
	}
	/* Border that crosses over corners button */
	&--crossover-border{
		position: relative;
		&::before{
			content: "";
			height: 20px;
			width: 20px;
			border: 2px solid #fff;
			border-color: #fff #fff transparent transparent; 
			position: absolute;
			top: 0px;
			right: 0px;
			transition-property: height, width;
			transition-duration: .3s;
		}
		&::after{
			content: "";
			height: 20px;
			width: 20px;
			border: 2px solid #fff;
			border-color: transparent transparent #fff #fff; 
			position: absolute;
			bottom: 0px;
			left: 0px;
			transition-property: height, width;
			transition-duration: .3s;
		}
		&:hover{
			&::before,
      &::after
			{
				height: 94%;
				width: 98%;
			}
		}
	}
	/* Border inner shadow button */
	&--inner-shadow-border {
		border: 1px solid #fff;
		transition: box-shadow .3s;
		position: relative;
		&::before {
			content: "";
			height: 100%;
			width:100%;
			position: absolute;
			border: 1px solid#fff;
			top: 0px;
			left: 0px;
			transition-property: transform,border-color;
			transition-duration: .4s;
		}
		&:hover{
			box-shadow: inset 0 0 .5rem #fff;
			&::before {
				transform: scale(1.2);
				border-color: transparent;
			}
		}
	}
  /* border background slides to the right button */
	&--bg-slide-right {
		border:1px solid #fff;
		position: relative;
		color: #fff;
		transition: color .3s;
		overflow: hidden;
		&::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			width: 0px;
			height: 100%;
			background-color: #fff;
			transition: width .3s cubic-bezier(1,.03,.74,.32);
			z-index: -1;
		}
		&:hover {
			color: $dark-color;
			&::before {
				width: 100%;
			}
		}

	}
  /* background slides to right at an angle */
	&--bg-slide-right-angle{
		border: 1px solid #fff;
		position: relative;
		overflow: hidden;
		transition: color .3s .3s;
		&::before{
			content: "";
			height: 300%;
			width: 0px;
			background-color: #fff;
			position: absolute;
			z-index: -1;
			top: -50px;
			left: -40px;
			transform: rotate(30deg);
			transition: width .5s cubic-bezier(1,.03,.74,.32);
		} 
		&:hover {
			color: $dark-color;
			&::before {
				width: 200%;
			}
		}
	} 
  /* backgrounds meet in the middle */
  &--bg-meet-in-middle{
	 border: 1px solid #fff;
	 position: relative;
	 transition: color .3s;
	 &::before{
		 content: "";
		 position: absolute;
		 bottom: 0px;
		 left: 0px;
		 height: 0px;
		 width: 100%;
		 background-color: #fff;
		 z-index: -1;
		 transition: height .3s;
	 } 
	 &::after{
		 content: "";
		 position: absolute;
		 top: 0px;
		 left: 0px;
		 height: 0px;
		 width: 100%;
		 background-color: #fff;
		 z-index: -1;
		 transition: height .3s;
	 }   
	 &:hover{
		 color: $dark-color;
		 &::before,
		 &::after{
			 height: 50%;
		 }
	 }  
	} 
	/* Border goes to rounded corners on hover*/
	&--rounded-corners-border{
		border: 1px solid #fff;
		transition: border-radius .3s;
		&:hover{
			border-radius: 100px;
		}
	}
	/* Curved animation from top to bottom*/
	&--bg-top-to-bottom{
		border: 1px solid #fff;
		transition: color .3s;
		position: relative;
		overflow: hidden;
		&::before{
			content: "";
			position: absolute;
			top: -50px;
			left: -40px;
			width: 0px;
			height: 0px;
			border-radius: 50%;
			background-color: #fff;
			transition-property: width,height;
			transition-duration: .5s;
			z-index: -1;
		}
		&:hover{
			color: $dark-color;
			&::before{
				width: 300px;
				height: 300px;
			}
		}
	}
}