Emulating an up/down button that temporarily changes blue when clicked

Question

I'd like to create a button that works like the gif below. I'm not concerned with the content of the field changing. I just want to learn how to create a button that looks and works like the one in the gif. The button should be clickable on the top and bottom and temporarily become blue when clicked so that you know you clicked it. Togglerbar and setterbar do not seem to work this way. Is there another button option or a modification that I can use to get this functionality?

Answer 1

You can use two individual instances of Button

Column[{
Button["\[UpArrow]", Print["up"]], 
Button["\[DownArrow]", Print["down"]]},
Spacings -> -1]

Unfortunately Button misbehaves on some systems when it comes to changing its size to just encompass its label (see this question). You might also notice a small optical glitch (visible in the .gif above as well) that when pressing the top button, part of the bottom button gets hidden behind a white margin.

Together with an InputField and smaller labels to fit in one row with the InputField the whole thing might look like this

DynamicModule[{x = 0},
Row[{
     InputField[Dynamic@x, FieldSize -> 2], 
     Column[{
             Button["\[FilledUpTriangle]", x++, ImageSize -> Small], 
             Button["\[FilledDownTriangle]", x--, ImageSize -> Small]}, 
             Spacings -> -0.65]
     }]
]

Answer 2

I thought this would fun to try. I got something close, but perhaps not close enough to get a cigar.

With[{size = 20}, 
  up = 
    Graphics[
      {Circle[{0, .75}, 1, {0, π}], 
       Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
       Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size];
  down = 
    Graphics[
      Rotate[#, 180 °, {0, 0}] & /@ 
        {Circle[{0, .75}, 1, {0, π}], 
         Line[{{-1, .75}, {-1, 0}, {1, 0}, {1, .75}}],
         Triangle[{{-.75, .75}, {0, 1.5}, {.75, .75}}]},
      ImageSize -> size]];

Manipulate[
  n,
  {{n, 0}, None},
  Panel[
    Column[
      {Button[up, n++, Appearance -> None],
       Button[down, n--, Appearance -> None]},
      Spacings -> 0],
    ContentPadding -> False,
    FrameMargins -> None],
  AppearanceElements -> None,
  ControlPlacement -> Right]

This certainly has the desired functionality. The question is whether or not it fakes the desired look-and-feel well enough.