Components - Buttons

<button class="basic-button"
        ng-click="">
    I'm a button
</button>
<a class="basic-button"
   href="#"
   role="button">
    I'm a link with button styling
</a>

/* Basic button
   ========================================================================== */
.basic-button {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    color: #FFFFFF;
    background-color: #EC643C; /* Button background color */
    border: 1px solid #EC643C; /* Button border color */
}
.basic-button:hover {
    outline: none;
    text-decoration: none;
    background-color: #df4516; /* Button background color on mouse hover */
    border-color: #df4516; /* Button border color on mouse hover */
}

<a href="#"
   role="button"
   class="button-go-back">
    <i class="fa fa-long-arrow-left button-go-back-icon"
       aria-hidden="true"></i>
    <span>back</span>
</a>

/* Button Go Back
========================================================================== */
.button-go-back {
    font-size: 1.2rem;
    color: var(--text);
    padding: .5rem 1rem;
    border-radius: .4rem;
    margin: 0 0 1rem 0;
    display: inline-block;
    text-decoration: none;
    transition: all .2s;
    background-color: #D9F1FF; /* Button background color */
}
.button-go-back:hover {
    text-decoration: none;
    background-color: #A6DEFF; /* Button background color on mouse hover */
}
.button-go-back-icon {
    margin-right: .4rem;
    position: relative;
    left: 0;
    transition: all .3s;
}
.button-go-back:hover .button-go-back-icon {
    left: -.3rem;
}

<div class="row row-equal-height">
    <div class="col-md-3 margin-bottom-2">
        <!-- Action card -->
        <a href="#"
           class="action-card">
            <i class="fa fa-map-o action-card-icon" aria-hidden="true"></i>
            <h3 class="action-card-title">
                Create a map
            </h3>
        </a>
    </div>
    <div class="col-md-3 margin-bottom-2">
        <!-- Action card -->
        <a href="#"
           class="action-card">
            <i class="fa fa-bar-chart action-card-icon" aria-hidden="true"></i>
            <h3 class="action-card-title">
                Create a chart
            </h3>
        </a>
    </div>
    <div class="col-md-3 margin-bottom-2">
        <!-- Action card -->
        <a href="#"
           class="action-card">
            <i class="fa fa-cogs action-card-icon" aria-hidden="true"></i>
            <h3 class="action-card-title">
                API
            </h3>
        </a>
    </div>
    <div class="col-md-3 margin-bottom-2">
        <!-- Action card -->
        <a href="#"
           class="action-card">
            <i class="fa fa-book action-card-icon" aria-hidden="true"></i>
            <h3 class="action-card-title">
                Documentation
            </h3>
        </a>
    </div>
</div>

/* Shared Styles
========================================================================== */
@media screen and (min-width: 992px) {
	.row-equal-height {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin-bottom: 20px;
	}
	/* Fix for early content wrapping in Safari*/
	.row-equal-height:before,
	.row-equal-height:after {
		content: normal;
	}
}
.margin-bottom-2 {
	margin-bottom: 20px;
}
/* Action Card
   ========================================================================== */
.action-card {
	background-color: var(--links);
	color: #FFFFFF;
	text-align: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 39px;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 100%;
	text-decoration: none;
	-webkit-transition: all .2s;
	-o-transition: all .2s;
	transition: all .2s;
}
.action-card:hover,
.action-card:focus {
	text-decoration: none;
    -webkit-transform: scale(1.02);
        -ms-transform: scale(1.02);
            transform: scale(1.02);
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
            box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
}
.action-card-icon {
	font-size: 2rem;
	margin-bottom: 13px;
}
.action-card-picto {
	width: 56px;
	height: auto;
	max-height: 56px;
	margin-bottom: 13px;
}
.action-card-title {
	color: inherit;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
}
.action-card-description {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	color: inherit;
	margin-top: 13px;
	margin-bottom: 26px;
}
.action-card-link {
	color: inherit;
	font-weight: bold;
	margin-top: auto;
}

<div ng-init="showDetails = false;">
    <button class="button-see-more"
            ng-click="showDetails = !showDetails">
        <span ng-show="showDetails == false">
            See more
            <i class="fa fa-long-arrow-down fa-fw" aria-hidden="true"></i>
        </span>
        <span ng-show="showDetails == true">
            See less
            <i class="fa fa-long-arrow-up fa-fw" aria-hidden="true"></i>
        </span>
    </button>
    <div ng-if="showDetails == true">
        I am content that wasn't visible before!
    </div>
</div>

/* See more button
   ========================================================================== */
.button-see-more {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 1rem 3rem;
    border: none;
    border-radius: 20px;
    text-align: center;
    transition: all .2s;
    outline: none;
    background-color: #FFE548; /* Button background color */
}
.button-see-more:hover {
    background-color: #ffd900; /* Button background color on mouse hover */
}