start_btn.onclick = () => {
info_box.classList.add("activeInfo");
};
.btn-12 {
align-items: center;
position: relative;
right: 30%;
bottom: 200px;
border: none;
box-shadow: none;
line-height: 42px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-12 span {
background: rgb(0, 172, 238);
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
display: block;
position: absolute;
width: 250px;
height: 40px;
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
border-radius: 5px;
margin: 0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-12 span:nth-child(1) {
box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
color: transparent;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
<div id="start_btn">
<button class="btn-12"><span>イ𝐢𝐦𝐞 𝐟𝐨𝐫 𝐭𝐡𝐞 𝑔𝐚𝐦ҽ.</span><span>Click Me</span></button>
</div>
以上代码:在输出结果中不显示按钮
我将类从"btn-12"和"start_btn"重命名为"start_btn1"和"btn-12"或"start_btn"和"btn-12l"
- 它在起作用**
2条答案
按热度按时间vmjh9lq91#
根据您的示例,您有一些冲突的样式。当
position: relative;
被删除时,它按预期工作。请考虑以下几点。
nnsrf1az2#
固定以上代码
更改为HTML:-
和CSS像这样:-
对齐项目:中心;... }
在CSS中添加“#start_btn