Original source: https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#standard-button-wrapper
These angled buttons are used in higher order components like Action Cards and CTAs
Currently, angled buttons are only supported in the two major UTSA colors, orange and blue. There are not plans at this point to implement a variant for white or grey colors.
Like Button, usage should avoid placing a orange/blue button on the same color background. Placing a color button on a same color background will force the button to change to an alternate color as seen above.
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
/* components/01-visual-styling/04-button/03-angled-button/angled-button.scss */
/* BEGIN angled-button.scss */
/* FROM VENDOR */
.orange-action-large-btn .action-btn:hover, .orange-action-large-btn .action-btn:focus {
background-color: $blue;
color: $white;
}
.blue-action-large-btn .action-btn:hover, .blue-action-large-btn .action-btn:focus {
background-color: $orange-a11y;
color: $white;
}
.action-btn i,
.action-btn svg {
color: $white;
}
.action-btn {
@extend .mb-1;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
padding: 13px 15px 13px 24px;
font-size: 15px;
position: relative;
z-index: 0;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.button-icons-component>div {
margin-bottom: 15px;
}
.action-btn .action-icon {
position: absolute;
right: 15px;
}
.action-btn::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 75px;
height: 100%;
z-index: -1;
border-top: 0.0rem solid rgba(255, 255, 255, 0.2);
border-right: 1.75rem solid rgba(255, 255, 255, 0.2);
border-left: 3.0rem solid transparent;
border-bottom: 8.0rem solid rgba(255, 255, 255, 0.2);
}
.action-btn.darkblue-bg:hover, .action-btn.darkblue-bg:focus {
background-color: #d3430d;
color: #fff !important;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
/* END FROM VENDOR */
.action-btn {
text-decoration: none;
width: 100%;
}
.action-btn.btn-large {
padding-top: 22px;
padding-bottom: 22px;
text-decoration: none;
margin-bottom: 5px;
}
.action-btn.orange-bg:hover, .action-btn.orange-a11y-bg:hover, .action-btn.orange-bg:focus, .action-btn.orange-a11y-bg:focus {
background-color: $blue;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.blue-action-btn .action-btn {
background-color: $blue;
color: $white;
}
.blue-action-btn .action-btn:hover, .blue-action-btn .action-btn:focus {
background-color: $orange-a11y;
}
.orange-action-btn>.action-btn {
background-color: $orange-a11y;
color: $white;
}
.orange-action-btn>.action-btn:hover, .orange-action-btn>.action-btn:focus {
background-color: $blue;
color: $white;
}
.orange-action-large-btn .action-btn {
background-color: $orange-a11y;
color: $white;
font-size: 16px;
font-weight: 600;
}
.blue-action-large-btn .action-btn {
background-color: $blue;
color: $white;
font-size: 16px;
font-weight: 600;
}
.nav-tabs-component .nav-tabs>li a {
font-size: 16px;
color: $blue;
font-weight: 700;
}
.blue-bg {
.orange-action-btn > .action-btn {
&:focus, &:hover {
background-color: $grey-c;
}
}
.orange-action-large-btn .action-btn {
&:focus, &:hover {
background-color: $grey-c;
}
}
.blue-action-btn .action-btn, .blue-action-large-btn .action-btn {
background-color: $orange-a11y;
color: $white;
}
.blue-action-btn:hover .action-btn {
background-color: $grey-b;
color: $blue;
}
.orange-a11y-bg {
.blue-action-btn .action-btn {
background-color: $blue;
color: $white;
}
.blue-action-large-btn .action-btn {
&:focus, &:hover {
background-color: $grey-c;
}
}
}
}
.orange-a11y-bg {
.blue-action-btn .action-btn {
&:focus, &:hover {
background-color: $grey-c;
}
}
.blue-action-large-btn .action-btn {
&:focus, &:hover {
background-color: $grey-c;
}
}
.orange-action-btn .action-btn, .orange-action-large-btn .action-btn {
::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 75px;
height: 100%;
z-index: -1;
border-top: 0.0rem solid rgba(0, 0, 0, 0.4);
border-right: 1.75rem solid rgba(0, 0, 0, 0.4);
border-left: 3.0rem solid transparent;
border-bottom: 8.0rem solid rgba(0, 0, 0, 0.4);
}
background-color: $white;
color: $blue;
}
.orange-action-btn:hover .action-btn, .orange-action-large-btn:hover .action-btn {
background-color: $grey-b;
color: $white;
}
}
/* Dark Mode - Angled Button Styles */
@include color-mode(dark) {
.buttons-bg-wrapper .orange-action-btn a.action-btn {
color: $white;
}
.buttons-bg-wrapper .blue-action-btn a.action-btn {
color: $white;
}
.blue-bg .blue-action-btn .action-btn {
background-color: $orange-a11y;
&:hover {
color: $blue;
background-color: $grey-c;
}
}
.orange-a11y-bg .buttons-bg-wrapper .orange-action-btn a.action-btn {
color: $blue;
}
.grey-bg .buttons-bg-wrapper .blue-action-btn a.action-btn:hover {
background-color: $orange-a11y;
}
.buttons-bg-wrapper .orange-action-large-btn a.action-btn.btn-large {
color: $white;
}
.orange-a11y-bg .buttons-bg-wrapper .orange-action-large-btn a.action-btn.btn-large {
color: $blue;
}
}
/* Dark Mode - Angled Button END */
/* END angled-button.scss */
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>