page-linkをボタンに置き換える記法
参考
外部リンクをファビコンに置き換える記法
書き方
[. [page-linkをボタンに置き換える記法#68cf7af80000000000531b24]]
page-linkをボタンに置き換える記法#68cf93be0000000000b6515e下に移動
code:style.css
.line:not(.cursor-line) {
.deco-\. {
a.page-link {
span {
display: inline-block;
height: 100%;
&:nth-of-type(1) {
width: 24px;
}
&:not(:nth-of-type(1)) {
display: none;
}
}
position: relative;
display: inline-block;
text-decoration: none;
color: transparent;
background: transparent;
height: 24px;
width: 24px;
margin-left: 3px;
margin-right: 5px;
transform: translateY(2px);
&::before {
content: "";
color: white;
background-color: #848484;
mask-image: url(https://scrapbox.io/files/68cf8c95215a85ec4d756899.svg?type=thumbnail);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateZ(0deg);
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
pointer-events: none;
}
&:hover::before {
transform: translate(-50%, -50%) rotateZ(90deg);
}
/* ホバーアニメーション */
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
outline: 2px solid #d8d8d8;
outline-offset: -3px;
border-radius: 5px;
height: 100%;
width: 100%;
z-index: -1;
transition: all 100ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
&:hover::after {
outline: 2px solid #848484;
}
}
}
}
code:style.css
@media (prefers-color-scheme: dark) {
.line:not(.cursor-line) {
.deco-\. {
a.page-link {
&::before {
background-color: #8097bc;
}
&:hover::before {
background-color: #d3d3d3;
}
&::after {
outline: 2px solid #374151;
outline-offset: -2px;
}
&:hover::after {
outline: 2px solid #d3d3d3;
}
}
}
}
}
ここに来ましたか？
page-linkをボタンに置き換える記法#68cf7c0a0000000000531ba6上へ
https://scrapbox.io/files/68cf8c95215a85ec4d756899.svg