tangled.org
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
+2
-1
input.css
+2
-1
input.css
···
111
111
@layer components {
112
112
.btn {
113
113
@apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center
114
-
bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900
114
+
bg-transparent px-2 pb-[0.2rem] pt-0 active:pt-[0.2rem] active:pb-0 text-sm text-gray-900
115
+
transition-[padding-top,padding-bottom] duration-150 ease-in-out
115
116
before:absolute before:inset-0 before:-z-10 before:block before:rounded
116
117
before:border before:border-gray-200 before:bg-white
117
118
before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)]
+1
-1
appview/pages/templates/timeline/home.html
+1
-1
appview/pages/templates/timeline/home.html
···
300
300
{{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium" }}
301
301
{{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }}
302
302
{{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }}
303
-
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }}
303
+
{{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 px-3 pt-[0.65rem] pb-[0.85rem] active:pt-[0.85rem] active:pb-[0.65rem] text-base btn" }}
304
304
305
305
<div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2">
306
306
<div class="{{ $cardStyle }} md:mr-32">
History
2 rounds
3 comments
juliet.tngl.sh
submitted
#1
2 commits
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
appview: fix the landing page buttons animation
no conflicts, ready to merge
expand 3 comments
we override the padding of the top level button in several locations, so a change like this could break buttons across the site i think.
wouldn't using translate solve this correctly? this demo i have uses only translate: https://neumorphic-button.surge.sh, and it correctly moves the text as well.
using translate to move the child elements won't work on the buttons where the text label is not inside a node, which are most of them, it also causes a visual bug with icons on safari due to some SVG subpixel issues
fwiw i do think the buttons need a bigger redesign for this change to work well across the site, neumorphism works well with on light theme, but on the dark theme it's hardly noticeable and the text labels moving when pressed might be jarring
juliet.tngl.sh
submitted
#0
1 commit
expand
collapse
appview: animate button label when pressed down
To match the expected motion from the button being pressed down, the label needs to move down by a few pixels to follow with shadow animation.
This is to fix the buttons on the landing page, they are styled somewhat differently and this overrides the global class