<main class="main-wrapper">
<button type="button" class="button">Button</button>
<button type="button" class="button depth-effect mt48">
<span class="after">Hover</span>
<span class="before">Button</span>
</button>
<button type="button" class="button double-door-effect mt48">Button</button>
<p class="mt48">※ a要素(ページ遷移リンク)とbutton要素(アクショントリガー、またはsubmit)の見た目はそれぞれ変えてください</p>
</main>
<main class="main-wrapper">
<button type="button" class="button">Button</button>
<button type="button" class="button depth-effect mt48">
<span class="after">Hover</span>
<span class="before">Button</span>
</button>
<button type="button" class="button double-door-effect mt48">Button</button>
<p class="mt48">※ a要素(ページ遷移リンク)とbutton要素(アクショントリガー、またはsubmit)の見た目はそれぞれ変えてください</p>
</main>
/* No context defined. */
.button-container {
justify-content: center;
}
.button {
display: inline-block;
position: relative;
width: 12.5rem;
height: 4rem;
margin: auto 1rem 2rem;
border: 2px solid var(--black);
text-align: center;
text-decoration: none;
transition: all .3s;
}
.button:hover, .button:focus {
background-color: #787878;
color: var(--white);
transition: all .3s;
}
.depth-effect {
position: relative;
top: 0;
border: transparent;
perspective: 19rem;
/* hover 3D effect */
}
.depth-effect > .after, .depth-effect > .before {
display: block;
position: absolute;
top: 0;
width: 12.5rem;
height: 4rem;
border: 2px solid #074015;
background-color: #f4dc71;
text-align: center;
line-height: 3.5rem;
color: #b15602;
transform: rotateX(90deg);
transition: all .3s;
transform-origin: 50% 50% -2rem;
}
.depth-effect > .before {
background-color: #96e4a3;
color: #074015;
transform: rotateX(0deg);
transform-origin: 50% 50% -2rem;
}
.depth-effect:hover, .depth-effect:focus {
border-color: transparent;
background-color: transparent;
color: transparent;
}
.depth-effect:hover > .after, .depth-effect:focus > .after {
z-index: 3;
border: 2px solid #b15602;
transform: rotateX(0deg);
}
.depth-effect:hover > .before, .depth-effect:focus > .before {
transform: rotateX(-90deg);
}
.double-door-effect {
z-index: 2;
border: 2px solid #035ca5;
color: var(--white);
/* double-door hover effect */
}
.double-door-effect:before, .double-door-effect:after {
content: "";
display: block;
position: absolute;
top: 0;
z-index: -1;
width: 12rem;
height: calc(4rem - 4px);
background-color: #339ee6;
transition: all .5s;
}
.double-door-effect:before {
left: 0;
}
.double-door-effect:after {
right: 0;
}
.double-door-effect:hover, .double-door-effect:focus {
border-color: #035ca5;
background-color: var(--white);
color: #035ca5;
}
.double-door-effect:hover:before, .double-door-effect:hover:after, .double-door-effect:focus:before, .double-door-effect:focus:after {
width: 0;
background-color: #5cb2eb;
transition: all .3s;
}
No notes defined.