<body class="container">
<div class="card font-regular">
<div class="card-heading">Solid Buttons</div>
<button type="button" class="btn btn-light">Light Button</button>
<button type="button" class="btn btn-dark">Dark Button</button>
<button type="button" class="btn btn-accent">Accent Button</button>
</div>
<div class="card font-regular">
<div class="card-heading">Outlined Buttons</div>
<button type="button" class="btn btn-light-outline">Light Button</button>
<button type="button" class="btn btn-dark-outline">Dark Button</button>
<button type="button" class="btn btn-accent-outline">Accent Button</button>
</div>
<div class="card font-regular">
<div class="card-heading">Full Width Buttons</div>
<button type="button" class="btn btn-light btn-full">Full Width Light Button</button>
<button type="button" class="btn btn-dark btn-full">Full Width Dark Button</button>
<button type="button" class="btn btn-accent btn-full">Full Width Accent Button</button>
</div>
<div class="card font-regular">
<div class="card-heading">Full Width Outline Buttons</div>
<button type="button" class="btn btn-light-outline btn-full">Full Width Light Button</button>
<button type="button" class="btn btn-dark-outline btn-full">Full Width Dark Button</button>
<button type="button" class="btn btn-accent-outline btn-full">Full Width Accent Button</button>
</div>
</body>
html,
body {
background-color: #006865;
color: #3f3f3f;
}
span {
color: #ff6f61;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-family: "Lato", sans-serif;
padding: 2rem;
}
.card {
margin: 1rem;
padding: 2rem;
border-radius: 5px;
flex-grow: 1;
background-color: #ffffff;
}
.card-heading {
background-color: #3f3f3f;
color: #ebfdff;
padding: 0.5rem;
text-align: center;
margin-bottom: 1rem;
border-radius: 3px;
}
.font-regular {
font-weight: 400;
}
.font-bold {
font-weight: 700;
}
.btn {
padding: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-right: 1rem;
border-radius: 50px;
border: none;
background-color: #EBFDFF;
color: #006865;
}
.btn:focus {
outline-width: 0px;
}
.btn:hover {
background-color: #CDF7FB;
cursor: pointer;
}
.btn-light {
background-color: #EBFDFF;
color: #006865;
}
.btn-light:hover {
background-color: #CDF7FB;
}
.btn-dark {
background-color: #1e1e1e;
color: #ffffff;
}
.btn-dark:hover {
background-color: #3f3f3f;
}
.btn-accent {
background-color: #ff6f61;
color: #ffffff;
}
.btn-accent:hover {
background-color: #F75141;
}
.btn-light-outline {
background-color: transparent;
border: solid #99dedf 2px;
color: #006865;
}
.btn-light-outline:hover {
background-color: #CDF7FB;
}
.btn-dark-outline {
background-color: transparent;
border: solid #1e1e1e 2px;
color: #1e1e1e;
}
.btn-dark-outline:hover {
background-color: #3f3f3f;
color: #ffffff;
}
.btn-accent-outline {
background-color: transparent;
border: solid #ff6f61 2px;
color: #ff6f61;
}
.btn-accent-outline:hover {
background-color: #ff6f61;
color: #ffffff;
}
.btn-full {
display: block;
width: 100%;
margin-bottom: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.