/* まずはお決まりのボックスサイズ算出をborer-boxに */
/* すべてのボタンデザインに共通しているわけではありません。不必要なものは消してください。 */
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;/*rem算出をしやすくするために*/
}
.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
HTML
<a href="" class="btn btn--yellow btn--cubic">PUSH！</a>
CSS
a.btn--yellow {
color: #000;
background-color: #fff100;
border-bottom: 5px solid #ccc100;
}
a.btn--yellow:hover {
margin-top: 3px;
color: #000;
background: # fff20a;
border-bottom: 2px solid #ccc100;
}
HTML
<a href="" class="btn btn--orange btn--cubic btn--shadow">PUSH！</a>
CSS
a.btn--orange {
color: #fff;
background-color: #eb6100;
border-bottom: 5px solid #b84c00;
}
a.btn--orange:hover {
margin-top: 3px;
color: #fff;
background: #f56500;
border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}
HTML
<a href="" class="btn btn--blue btn--emboss btn--cubic">PUSH！</a>
CSS
a.btn--blue {
color: #fff;
background: #00bff8;
border-bottom: 5px solid #0090bb;
}
a.btn--blue:hover {
margin-top: 3px;
color: #0090bb;
background: #00bff8;
border-bottom: 2px solid #0090bb;
}
a.btn--emboss {
color: #0090bb;
text-shadow: -1px -1px 1px #55d8ff;
}
HTML
<a href="" class="btn btn--green btn--emboss btn--cubic">PUSH！<i class="fas fa-angle-right fa-position-right"></i></a>
CSS
a.btn--green.btn--emboss {
color: #00662d;
background-color: #094;
text-shadow: -1px -1px 1px #00ff71;
border-bottom: 5px solid #00662d;
}
a.btn--green.btn--cubic:hover {
margin-top: 3px;
background-color: #094;
border-bottom: 2px solid #00662d;
}
.fa-position-right {
position: absolute;
top: calc(50% - .5em);
right: 1rem;
}
HTML
<a href="" class="btn btn--pink btn--raised btn--cubic">PUSH！<i class="fas fa-angle-right fa-position-right"></i></a>
CSS
a.btn--raised {
color: #eb6877;
text-shadow: -1px -1px 1px rgba(255, 255, 255, .44), 1px 1px 1px #4a0a11;
}
.btn--pink,
a.btn--pink,
button.btn--pink {
color: #fff;
background-color: #eb6877;
}
.btn--pink.btn--cubic,
a.btn--pink.btn--cubic,
button.btn--pink.btn--cubic {
border-bottom: 5px solid #e53b4e;
}
a.btn--pink.btn--cubic:hover {
margin-top: 3px;
background-color: #eb6877;
border-bottom: 2px solid #e53b4e;
}
HTML
<a href="" class="btn btn--red btn--radius btn--cubic">PUSH！<i class="fas fa-angle-right fa-position-right"></i></a>
CSS
.btn--red,
a.btn--red {
color: #fff;
background-color: #d20010;
}
.btn--red:hover,
a.btn--red:hover {
color: #fff;
background: #d20010;
}
a.btn--red.btn--cubic {
border-bottom: 5px solid #9f000c;
}
a.btn--red.btn--cubic:hover {
margin-top: 3px;
border-bottom: 2px solid #9f000c;
}
a.btn--radius {
border-radius: 100vh;
}
.fa-position-right {
position: absolute;
top: calc(50% - .5em);
right: 1rem;
}
HTML
<a href="" class="btn btn--purple btn--radius btn--cubic"><i class="fas fa-angle-double-right fa-position-left"></i>PUSH<i class="fas fa-angle-double-left fa-position-right"></i></a>
CSS
.btn--purple,
a.btn--purple {
color: inherit;
color: #fff;
background-color: #5f52a0;
}
.btn--purple:hover,
a.btn--purple:hover {
color: inherit;
color: #fff;
background: #5f52a0;
}
a.btn--purple.btn--cubic {
border-bottom: 5px solid #4b417e;
}
a.btn--purple.btn--cubic:hover {
margin-top: 3px;
border-bottom: 2px solid #4b417e;
}
.fa-position-left {
position: absolute;
top: calc(50% - .5em);
left: 1rem;
}
.fa-position-right {
position: absolute;
top: calc(50% - .5em);
right: 1rem;
}
HTML
<a href="" class="btn btn--orange btn--border-solid">PUSH！</a>
CSS
.btn--orange,
a.btn--orange {
color: #fff;
background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
color: #fff;
background: #f56500;
}
a.btn--orange.btn--border-solid {
border: 2px solid #b84c00;
}
HTML
<a href="" class="btn btn--blue btn--border-double">PUSH！</a>
CSS
a.btn--blue {
color: #fff;
background: #00bff8;
border-bottom: 5px solid #0090bb;
}
a.btn--blue:hover {
margin-top: 3px;
color: #0090bb;
background: #00bff8;
border-bottom: 2px solid #0090bb;
}
a.btn--blue.btn--border-double {
border: 8px double #0090bb;
}
HTML
<a href="" class="btn btn--green btn--border-groove">PUSH！</a>
CSS
.btn--green,
a.btn--green,
button.btn--green {
color: #fff;
background-color: #094;
}
a.btn--green.btn--border-groove {
border: 6px groove #008039;
}
HTML
<a href="" class="btn btn--pink btn--border-ridge">PUSH！</a>
CSS
.btn--pink, a.btn--pink, button.btn--pink {
color: #fff;
background-color: #eb6877;
}
a.btn--pink.btn--border-ridge {
border: 6px ridge #e53b4e;
}
HTML
<a href="" class="btn btn--red btn--border-inset">PUSH！</a>
CSS
.btn--red, #sidebar .category .category-inner .posted-content .customer a.btn--red {
color: #fff;
background-color: #d20010;
}
a.btn--red.btn--border-inset {
border: 6px inset #b9000e;
}
HTML
<a href="" class="btn btn--red btn--border-outset">PUSH！</a>
CSS
.btn--red, #sidebar .category .category-inner .posted-content .customer a.btn--red {
color: #fff;
background-color: #d20010;
}
a.btn--red.btn--border-outset {
border: 6px outset #b9000e;
}
HTML
<a href="" class="btn btn--yellow btn--border-dashed">PUSH！</a>
CSS
a.btn--yellow {
color: #000;
background-color: #fff100;
}
a.btn--yellow.btn--border-dashed {
border: 2px dashed #000;
}
HTML
<a href="" class="btn btn--yellow btn--border-dotted">PUSH！</a>
CSS
.btn--pink, a.btn--pink, button.btn--pink {
color: #fff;
background-color: #eb6877;
}
a.btn--yellow.btn--border-dotted {
border: 3px dotted #000;
}
HTML
<a class="btn btn-custom01"><span class="btn-custom01-front">PUSH</span><i class="fas fa-angle-right fa-position-right"></i></a>
CSS
a.btn-custom01 {
margin-bottom: 0.5rem;
padding: 0;
border-radius: 0.75rem;
}
a.btn-custom01:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: translate3d(0, 0.75rem, -1rem);
transform: translate3d(0, 0.75rem, -1rem);
border: 2px solid #000;
border-radius: inherit;
background: #ccc100;
-webkit-box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.6rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:after {
font-family: "Font Awesome 5 Free";
font-size: 2rem;
font-weight: normal;
line-height: 1;
position: absolute;
top: calc(50% - 1rem);
left: 1.5rem;
margin: 0;
padding: 0;
content: "\f0e0";
}
.btn-custom01-front {
position: relative;
display: block;
padding: 1.5rem 5rem 1.5rem 5rem;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #000;
border-radius: inherit;
background: #fff100;
}
.fa-position-left {
position: absolute;
top: calc(50% - 0.5em);
left: 1rem;
}
.fa-position-right {
position: absolute;
top: calc(50% - 0.5em);
right: 1rem;
}
a.btn-custom01:hover {
-webkit-transform: translate(0, 0.25rem);
transform: translate(0, 0.25rem);
background: #fff100;
}
a.btn-custom01:hover:before {
-webkit-transform: translate3d(0, 0.5rem, -1rem);
transform: translate3d(0, 0.5rem, -1rem);
-webkit-box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0.35rem 0 0 rgba(0, 0, 0, 0.2);
}
a.btn-custom01:hover:after {
content: "\f2b6";
}