扉のように開くボタン
問題
扉のように開くボタンを作成しましょう!
自分の環境に書くコード
<div class="btn">ここをクリック</div>
¥HTML¥
.btn{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid black;
position: relative;
color: white;
cursor: pointer;
}
.btn::before,.btn::after{
position: absolute;
content: "";
width: 50%;
height: 100%;
top: 0;
background-color: black;
z-index: -1;
transition: .5s;
}
.btn::before{
left: 0;
}
.btn::after{
right: 0;
}
.btn:hover{
color: black;
}
¥CSS¥
期待する画面
解答ソースコード
.btn{
perspective: 500px;
}
.btn::before{
transform-origin: left;
}
.btn::after{
transform-origin: right;
}
.btn:hover::before{
transform: rotateY(-90deg);
}
.btn:hover::after{
transform: rotateY(90deg);
}
¥CSS¥
完了にする!
解説