css 3 buttons

css-3-buttons.markdown

css 3 buttons

Css buttons animation with transition properties.

A Pen by Oleg Semenov on CodePen.

License.

index.html

	<div class="wrapper">
	  <h1>{ css 3 }</h1>
	  <p>css buttons animation with transition properties</p>
	
<div class="btn-groups">
	  <div class="btn-red-tr">danger</div>
		  <div class="btn-green-tr">success </div> 
  <div class="btn-blue-tr">pirmary</div> 

	  <div class="btn-red-qa">danger</div>
	  <div class="btn-green-qa">success </div> 
	  <div class="btn-blue-qa">pirmary</div> 

	</div>   
</div>

style.scss

$color-button-red: #e74c3c;
$color-button-green: #2ecc71;
$color-button-blue: #3498db;

$color-text: #ecf0f1;

$font-family: Arial, helvetica, sans-serif;
$font-size: 100%;

// global style

body {
	font-size: $font-size;
	font-family: $font-family;
}

.wrapper {
	width: 720px;
 	margin: 45px auto; 
	h1 {
		font-size: $font-size + 180%;
		text-align: center;
		text-transform: uppercase; 
	}
	p {
		font-size: $font-size + 50%;
		text-align: center;
		text-transform: uppercase; 
	}
	.btn-groups {
		width: 640px;
		margin: 0 auto;
	}
}

// button --tr

.btn-red-tr, .btn-green-tr, .btn-blue-tr {
	min-width: 130px;
	position: relative;
	display: inline-block;

	text-align: center;
	text-transform: uppercase; 

	padding: 15px;
	margin: 30px 25px;

	font-size: $font-size + 40%;
	font-weight: 600;

	color: $color-text;

	transition: 0.5s;
}

.btn-red-tr { background-color: $color-button-red; }
.btn-green-tr { background-color: $color-button-green; }
.btn-blue-tr { background-color: $color-button-blue; }

.btn-red-tr:before {
	position: absolute;
	content:"";
	border-top: 5px solid lighten($color-button-red, 5%);
	border-left: 5px solid lighten($color-button-red, 5%);	
	border-right: 5px solid darken($color-button-red, 5%);
	border-bottom: 5px solid darken($color-button-red, 5%);

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;	

  transition: 0.5s;

}

.btn-green-tr:before {
	position: absolute;
	content:"";
	border-top: 5px solid lighten($color-button-green, 5%);
	border-left: 5px solid lighten($color-button-green, 5%);	
	border-right: 5px solid darken($color-button-green, 5%);
	border-bottom: 5px solid darken($color-button-green, 5%);

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;	

  transition: 0.5s;

}

.btn-blue-tr:before {
	position: absolute;
	content:"";
	border-top: 5px solid lighten($color-button-blue, 5%);
	border-left: 5px solid lighten($color-button-blue, 5%);	
	border-right: 5px solid darken($color-button-blue, 5%);
	border-bottom: 5px solid darken($color-button-blue, 5%);

  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;	

  transition: 0.5s;

}

.btn-red-tr:hover {
	box-shadow: 7px 7px darken($color-button-red, 20%), -7px -7px lighten($color-button-red, 20%);
	cursor: pointer;
		&::before {
		border: 0px ;
	}
}

.btn-green-tr:hover {
	box-shadow: 7px 7px darken($color-button-green, 20%), -7px -7px lighten($color-button-green, 20%);
	cursor: pointer;
		&::before {
		border: 0px ;
	}
}

.btn-blue-tr:hover {
	box-shadow: 7px 7px darken($color-button-blue, 20%), -7px -7px lighten($color-button-blue, 20%);
	cursor: pointer;
	&::before {
		border: 0px ;
	}
}

// button --qa

.btn-red-qa, .btn-green-qa, .btn-blue-qa {
	min-width: 120px;
	position: relative;
	display: inline-block;

	text-align: center;
	text-transform: uppercase; 

	padding: 10px 15px;
	margin: 30px 25px;

	font-size: $font-size + 40%;
	font-weight: 600;

	transition: 0.5s;
}

.btn-red-qa { border: 5px solid $color-button-red; color: $color-button-red;}
.btn-green-qa { border: 5px solid $color-button-green; color: $color-button-green; }
.btn-blue-qa { border: 5px solid $color-button-blue; color: $color-button-blue; }

.btn-red-qa:hover {
	
	cursor: pointer;
		&::before {
		border: 0px ;
	}
}

.btn-green-qa:hover {
	
	cursor: pointer;
		&::before {
		border: 0px ;
	}
}

.btn-blue-qa:hover {
	background-color: darken($color-button-blue, 5%);
	border: 5px solid lighten($color-button-blue, 5%);
	color: $color-text;

	cursor: pointer;
}

.btn-red-qa:hover {
	background-color: darken($color-button-red, 5%);
	border: 5px solid lighten($color-button-red, 5%);
	color: $color-text;

	cursor: pointer;
}

.btn-green-qa:hover {
	background-color: darken($color-button-green, 5%);
	border: 5px solid lighten($color-button-green, 5%);
	color: $color-text;

	cursor: pointer;
}