College Design Language System

Button: Default

Button Documentation

Original source: https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#standard-button-wrapper

Supported Variants

  • Default: Blue buttons
  • Orange: Orange buttons
  • Grey: Grey buttons

Considerations for same color on background color have been implemented as of 11/2023: Placing an orange button on a component with an orange background will force the orange button to be white, not changing the background color. Similarly, a blue button placed on a blue background will force the button to be white by default.

<a class="blue-btn" href="#">Action</a>
  • Content: 
    /* components/01-visual-styling/04-button/02-button/button.scss */
/* BEGIN button.scss */
// /* Button Component Wrapper */
button:focus {
	outline: none;
}

.blue-btn {
	background-color: $blue;
	padding: 10px 15px;
	display: inline-block;
	text-align: center;
	min-width: 168px;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 16px;
	color: $white;
	text-decoration: none;

	&:hover {
		background-color: $orange-a11y;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}	
}

.orange-btn {
	background-color: $orange-a11y;
	padding: 10px 15px;
	display: inline-block;
	text-align: center;
	min-width: 168px;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 16px;
	color: $white;
	text-decoration: none;
	&:hover {
		background-color: $blue;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

.white-btn {
	background-color: $white;
	padding: 10px 15px;
	display: inline-block;
	text-align: center;
	min-width: 168px;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 16px;
	color: $blue;
	text-decoration: none;
	&:hover {
		background-color: $blue;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

.grey-btn {
	background-color: $grey;
	padding: 10px 15px;
	display: inline-block;
	text-align: center;
	min-width: 168px;
	font-weight: 600;
	margin-bottom: 15px;
	font-size: 16px;
	color: $blue;
	text-decoration: none;

	&:hover {
		background-color: $grey-d;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}	
}

.blue-bg {
	.white-btn:hover {
		background-color: $grey-b;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.orange-btn:hover {
		background-color: $grey-c;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.grey-btn {
		background-color: $grey-d;
		color: $white;
		
		&:hover {
			background-color: $grey;
			color: $blue;		
		}
	}
	.blue-btn {
		background-color: $white;
		color: $blue;
	}

	.blue-btn:hover {
		background-color: $grey-b;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

.orange-a11y-bg {
	.white-btn:hover, .orange-bg .white-btn:hover {
		background-color: $grey-c;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.blue-btn:hover, .orange-bg .blue-btn:hover {
		background-color: $grey-c;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.grey-btn {
		background-color: $grey-d;
		color: $white;
		
		&:hover {
			background-color: $grey;
			color: $blue;		
		}
	}

	.orange-btn {
		background-color: $blue;
		color: $white;
	}

	.orange-btn:hover {
		background-color: $grey-b;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

.grey-bg {
	.blue-btn {
		color: $white;
	}
	.orange-btn {
		color: $white;
	}
	.grey-btn {
		background-color: $grey-d;
		color: $white;
	} 
	.grey-btn:hover {
		background-color: $white-b;
		color: $orange-a11y;
	}

	.white-btn:hover, .orange-bg .white-btn:hover {
		background-color: $grey-c;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	
	.blue-btn:hover, .orange-bg .blue-btn:hover {
		background-color: $grey-c;
		color: $white;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
}

.banner-btns>.orange-btn {
	margin-right: 15px;
}

.video-controls-wrap>div {
	margin-bottom: 15px;
}

#main-slider-wrapper .banner-btns {
	.orange-btn, .white-btn, .blue-btn, .grey-btn {
		max-width: 200px;
	}	
}

/* Dark Mode - Button Styles */
@include color-mode(dark) {
	.buttons-bg-wrapper {
		&>a {
			color: $white;
			&.blue-btn {
				&:hover {
					background-color: $grey-c;
				}
			}
			&.white-btn {
				color: $blue;
			}
		}
 	}
	a.white-btn {
		color: $blue;
	}
	.blue-bg .buttons-bg-wrapper>a.blue-btn {
		color:$blue;
		&:hover {
			color: $blue;
		}
	}
	.white-bg .buttons-bg-wrapper>a.grey-btn {
		color:$blue;
		&:hover {
			color: $white;
		}
	}
}
/* Dark Mode - Button END */

/* END button.scss */
  • URL: /components/raw/button/button.scss
  • Filesystem Path: components/01-visual-styling/02-button/02-button/button.scss
  • Size: 4.8 KB 
<a class="blue-btn" href="#">Action</a>