hexo-theme-stellar/source/css/_common/button.styl

61 lines
1.2 KiB
Stylus
Raw Normal View History

2021-03-05 21:37:28 +08:00
button
border: none
font-weight: 500
outline: none
disable-select()
cursor: pointer
a.button
font-weight: 500
line-height: 1
padding: 0.75rem 2rem
2022-12-15 22:42:48 +08:00
border-radius: $border-button
2021-03-05 21:37:28 +08:00
font-size: $fs-15
2022-12-16 14:53:08 +08:00
user-select: none
2021-03-05 21:37:28 +08:00
&.theme
background: $color-theme
2022-10-05 23:00:52 +08:00
color: var(--card)
2021-03-05 21:37:28 +08:00
&:hover
background: $color-hover
2022-12-15 22:42:48 +08:00
&.start
border-radius: 100px
background: var(--text-p1)
color: var(--card)
2021-03-05 21:37:28 +08:00
a[onclick]:hover
cursor: pointer
2022-12-16 14:53:08 +08:00
a.button.start.gradient
position relative
2024-01-25 22:50:17 +08:00
@media (prefers-color-scheme: dark)
2022-12-16 14:53:08 +08:00
transition: 0.38s ease-out
2024-01-25 22:50:17 +08:00
z-index: 0
background: convert(hexo-config('style.gradient.start'))
background-size: 1000%
color: white
text-shadow: 0 0 1px rgba(0,0,0,0.12)
animation: glow 60s linear infinite
@keyframes glow {
from {
background-position: 0%
}
to {
background-position: 1000%
}
}
&:after
content: ''
position absolute
left: 0
right: 0
top: 0
bottom: 0
border-radius: 100px
background: inherit
z-index -1
filter: blur(12px)
opacity: 0.5
transition: 0.38s ease-out
&:hover:after
filter: blur(36px)
opacity 1