source

themes/butterfly/source/css/_global/function.styl

@@ -181,6 +181,60 @@ if hexo-config('avatar.effect') == true
 .reward-main
   animation: donate_effcet .3s .1s ease both
 
+.btn-effects
+  position: relative
+  overflow: hidden
+  transition: all .3s cubic-bezier(.4, 0, .2, 1)
+  transform: translateZ(0)
+
+  &:hover
+    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
+    text-decoration: none
+    transform: translateY(-1px) scale(1.02)
+
+  &:active
+    transition-duration: .1s
+    transform: translateY(0) scale(.98)
+
+  i
+    display: inline-block
+    vertical-align: middle
+    transition: all .3s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover i
+    animation: buttonIconBounce .6s ease-in-out
+
+  i + span
+    margin-left: 6px
+    vertical-align: middle
+    transition: margin-left .3s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover i + span
+    margin-left: 8px
+
+  &::before
+    position: absolute
+    top: 0
+    left: -100%
+    z-index: 1
+    width: 100%
+    height: 100%
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent)
+    content: ''
+    transition: left .5s cubic-bezier(.4, 0, .2, 1)
+
+  &:hover::before
+    left: 100%
+
+  & > *
+    position: relative
+    z-index: 2
+
+.btn-effects-large
+  &:hover
+    box-shadow: 0 6px 16px rgba(0, 0, 0, .2)
+    transform: translateY(-2px) scale(1.03)
+
 @keyframes scroll-down-effect
   0%
     opacity: .4
@@ -278,3 +332,17 @@ if hexo-config('avatar.effect') == true
 
   100%
     transform: translateX(0)
+
+@keyframes buttonIconBounce
+  0%,
+  100%
+    transform: translateY(0) scale(1)
+
+  25%
+    transform: translateY(-3px) scale(1.1) rotateZ(-5deg)
+
+  50%
+    transform: translateY(0) scale(1.05) rotateZ(0)
+
+  75%
+    transform: translateY(-1px) scale(1.02) rotateZ(2deg)

themes/butterfly/source/css/_global/index.styl

@@ -39,6 +39,65 @@
   --zoom-bg: #fff
   --mark-bg: alpha($dark-black, .3)
 
+// tags plugin
+:root
+  --btn-color: $btn-color
+  --btn-default-color: $btn-default-color
+  --tags-blue-color: $tagsP-blue-color
+  --tags-blue-color-lighten: lighten($tagsP-blue-color, 85%)
+  --tags-pink-color: $tagsP-pink-color
+  --tags-pink-color-lighten: lighten($tagsP-pink-color, 85%)
+  --tags-red-color: $tagsP-red-color
+  --tags-red-color-lighten: lighten($tagsP-red-color, 85%)
+  --tags-orange-color: $tagsP-orange-color
+  --tags-orange-color-lighten: lighten($tagsP-orange-color, 85%)
+  --tags-purple-color: $tagsP-purple-color
+  --tags-purple-color-lighten: lighten($tagsP-purple-color, 85%)
+  --tags-green-color: $tagsP-green-color
+  --tags-green-color-lighten: lighten($tagsP-green-color, 85%)
+  --note-default-border: $note-default-border
+  --note-default-bg: $note-default-bg
+  --note-default-text: $note-default-text
+  --note-modern-default-border: $note-modern-default-border
+  --note-modern-default-bg: $note-modern-default-bg
+  --note-modern-default-text: $note-modern-default-text
+  --note-modern-default-hover: $note-modern-default-hover
+  --note-primary-border: $note-primary-border
+  --note-primary-bg: $note-primary-bg
+  --note-primary-text: $note-primary-text
+  --note-modern-primary-border: $note-modern-primary-border
+  --note-modern-primary-bg: $note-modern-primary-bg
+  --note-modern-primary-text: $note-modern-primary-text
+  --note-modern-primary-hover: $note-modern-primary-hover
+  --note-info-border: $note-info-border
+  --note-info-bg: $note-info-bg
+  --note-info-text: $note-info-text
+  --note-modern-info-border: $note-modern-info-border
+  --note-modern-info-bg: $note-modern-info-bg
+  --note-modern-info-text: $note-modern-info-text
+  --note-modern-info-hover: $note-modern-info-hover
+  --note-success-border: $note-success-border
+  --note-success-bg: $note-success-bg
+  --note-success-text: $note-success-text
+  --note-modern-success-border: $note-modern-success-border
+  --note-modern-success-bg: $note-modern-success-bg
+  --note-modern-success-text: $note-modern-success-text
+  --note-modern-success-hover: $note-modern-success-hover
+  --note-warning-border: $note-warning-border
+  --note-warning-bg: $note-warning-bg
+  --note-warning-text: $note-warning-text
+  --note-modern-warning-border: $note-modern-warning-border
+  --note-modern-warning-bg: $note-modern-warning-bg
+  --note-modern-warning-text: $note-modern-warning-text
+  --note-modern-warning-hover: $note-modern-warning-hover
+  --note-danger-border: $note-danger-border
+  --note-danger-bg: $note-danger-bg
+  --note-danger-text: $note-danger-text
+  --note-modern-danger-border: $note-modern-danger-border
+  --note-modern-danger-bg: $note-modern-danger-bg
+  --note-modern-danger-text: $note-modern-danger-text
+  --note-modern-danger-hover: $note-modern-danger-hover
+
 body
   position: relative
   overflow-y: scroll

themes/butterfly/source/css/_layout/aside.styl

@@ -60,6 +60,7 @@
       text-align: center
       line-height: 2.4
       addBorderRadius(7)
+      @extend .btn-effects
 
       &:hover
         background-color: var(--btn-hover-color)
@@ -180,6 +181,11 @@
     .card-category-list
       &.child
         padding: 0 0 0 16px
+        overflow: hidden
+        max-height: 0
+        opacity: 0
+        visibility: hidden
+        transition: max-height .3s ease, opacity .3s ease
 
       > .parent
         > a
@@ -188,7 +194,9 @@
               transform: rotate(-90deg)
 
             & + .child
-              display: block
+              max-height: 1000px
+              opacity: 1
+              visibility: visible
 
           .card-category-list
             &-name
@@ -207,7 +215,9 @@
 
         if hexo-config('aside.card_categories.expand') == false
           > .child
-            display: none
+            max-height: 0
+            opacity: 0
+            visibility: hidden
 
   .card-webinfo
     .webinfo