6,584
回編集
差分
ページの作成:「<includeonly><style>.hp-btn-can { display: inline-block; position: relative; width: 230px; height: 60px; bottom: 3px; left: 3px; margin: 4px 1%; overflow:…」
<includeonly><style>.hp-btn-can {
display: inline-block;
position: relative;
width: 230px;
height: 60px;
bottom: 3px;
left: 3px;
margin: 4px 1%;
overflow: hidden;
cursor: default;
}
.hp-btn-bg-can,
.hp-btn-top-left-can,
.hp-btn-top-right-can,
.hp-btn-circuits-box-can,
.hp-btn-circuits-can,
.hp-btn-text-box-can,
.hp-btn-text-can,
.hp-btn-icon-can,
.hp-btn-link-can {
display: block;
position: absolute;
}
.hp-btn-bg-can {
bottom: 3px;
left: 3px;
}
.hp-btn-top-left-can,
.hp-btn-top-right-can {
bottom: 3px;
left: 3px;
}
.hp-btn-text-box-can {
bottom: 8px;
left: 22px;
height: 36px;
width: 166px;
overflow: hidden;
}
.hp-btn-bg-can,
.hp-btn-top-left-can,
.hp-btn-top-right-can {
filter: drop-shadow(0 0 2px black);
transition: filter 1s;
-webkit-transition: filter 1s;
}
.hp-btn-can:hover .hp-btn-bg-can,
.hp-btn-can:hover .hp-btn-top-left-can,
.hp-btn-can:hover .hp-btn-top-right-can {
filter: drop-shadow(0 0 2px white);
}
.hp-btn-text-can {
bottom: 50%;
width: 166px;
transform: translateY(50%);
text-align: center;
text-shadow: 0 0 2px black;
font-family: '方正正黑', 'Noto Sans', 'Noto Sans CJK SC', 'Noto Sans CJK JP', sans-serif;
color: #F2F1EB;
font-size: 20px;
font-weight: 700;
left: 0;
transition: left 1s;
-webkit-transition: left 1s;
}
.hp-btn-can:hover .hp-btn-text-can {
left: 20px;
}
.hp-btn-icon-can {
top: 0;
left: 20px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.hp-btn-can:hover .hp-btn-icon-can {
opacity: 1
}
.hp-btn-link-can {
top: 0;
left: 0;
}
.hp-btn-circuits-can {
left: 0;
bottom: 0;
transition: left 6s;
-webkit-transition: left 6s;
}
.hp-btn-circuits-box-can {
bottom: 8px;
left: 22px;
width: 166px;
overflow: hidden;
}
.hp-btn-can:hover .hp-btn-circuits-can {
left: -90px;
}
</style></includeonly><noinclude></noinclude>
display: inline-block;
position: relative;
width: 230px;
height: 60px;
bottom: 3px;
left: 3px;
margin: 4px 1%;
overflow: hidden;
cursor: default;
}
.hp-btn-bg-can,
.hp-btn-top-left-can,
.hp-btn-top-right-can,
.hp-btn-circuits-box-can,
.hp-btn-circuits-can,
.hp-btn-text-box-can,
.hp-btn-text-can,
.hp-btn-icon-can,
.hp-btn-link-can {
display: block;
position: absolute;
}
.hp-btn-bg-can {
bottom: 3px;
left: 3px;
}
.hp-btn-top-left-can,
.hp-btn-top-right-can {
bottom: 3px;
left: 3px;
}
.hp-btn-text-box-can {
bottom: 8px;
left: 22px;
height: 36px;
width: 166px;
overflow: hidden;
}
.hp-btn-bg-can,
.hp-btn-top-left-can,
.hp-btn-top-right-can {
filter: drop-shadow(0 0 2px black);
transition: filter 1s;
-webkit-transition: filter 1s;
}
.hp-btn-can:hover .hp-btn-bg-can,
.hp-btn-can:hover .hp-btn-top-left-can,
.hp-btn-can:hover .hp-btn-top-right-can {
filter: drop-shadow(0 0 2px white);
}
.hp-btn-text-can {
bottom: 50%;
width: 166px;
transform: translateY(50%);
text-align: center;
text-shadow: 0 0 2px black;
font-family: '方正正黑', 'Noto Sans', 'Noto Sans CJK SC', 'Noto Sans CJK JP', sans-serif;
color: #F2F1EB;
font-size: 20px;
font-weight: 700;
left: 0;
transition: left 1s;
-webkit-transition: left 1s;
}
.hp-btn-can:hover .hp-btn-text-can {
left: 20px;
}
.hp-btn-icon-can {
top: 0;
left: 20px;
opacity: 0;
transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.hp-btn-can:hover .hp-btn-icon-can {
opacity: 1
}
.hp-btn-link-can {
top: 0;
left: 0;
}
.hp-btn-circuits-can {
left: 0;
bottom: 0;
transition: left 6s;
-webkit-transition: left 6s;
}
.hp-btn-circuits-box-can {
bottom: 8px;
left: 22px;
width: 166px;
overflow: hidden;
}
.hp-btn-can:hover .hp-btn-circuits-can {
left: -90px;
}
</style></includeonly><noinclude></noinclude>
