作成したボタンのリンクに飛べない
-
トップページの一番上記のボタンがリンク飛びません。
divタグが重複して邪魔しているからだと思いますが、対策方法がわかりません。
divを消すとリンクに飛びますがデザインが崩れてしまいます。アドバイスお願いします。
作成したボタンcss
.button_base {
margin: 0;
border: 0;
font-size: 13pt;
position: relative;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
width: 200px;
height: 50px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-select: none;
cursor: default;
}.button_base:hover {
cursor: pointer;
}.abc {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}.abc div {
position: absolute;
text-align: center;
width: 100%;
height: 50px;
padding: 13px;
border: #8A1C22 solid 2px;
pointer-events: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}.abc div:nth-child(1) {
color:#8A1C22;
background-color: #fff;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}.abc div:nth-child(2) {
color: #fff;
background-color: #8A1C22;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform-origin: 50% 50% -25px;
-webkit-transform-origin: 50% 50% -25px;
-moz-transform-origin: 50% 50% -25px;
}.abc:hover div:nth-child(1) {
color: #8A1C22;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}.abc:hover div:nth-child(2) {
background-color: #8A1C22;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}html
<div class=”back”>
<div class=”button_base abc”>
<div>体成分とは?</div>
<div>体成分とは?</div>
</div>
</div>ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「作成したボタンのリンクに飛べない」には新たに返信することはできません。