How can I create a help button that looks more “professional”?

Question

My goal, is to make the following button,

Button[Style["?", Black, Bold], MessageDialog[Column[{Style["Help", Bold, Black, FontSize
-> 12],"Some Text Here"}], WindowTitle -> "Help", Background -> White]];

look more like a "canonical" help button. If we take a look at most programs, these types of buttons have a distinguished stylization.

An example could be:

How would I achieve this in Mathematica while keeping the same structure of my above code?

Answer 1

Why not just use the graphic in the question, or any other images that you like:

Use ImageSize to control the final size of the button:

An alternative, that I use in some applications, is something like this:

help[$helpmessage_: "", $videolink_: ""] := 
  ActionMenu[
   Graphics[{{RGBColor[0.689647, 0.761166, 0.805478], 
      Disk[{0, 0}, 0.1]}, {GrayLevel[0], Circle[{0, 0}, 0.1], 
      Style[Inset["?", {0.01, 0}], "Label", FontSize -> 11]}},
    ImageSize -> {20, 20}],
   {"Help Notes" :> MessageDialog[
      Grid[{
        {Style[$helpmessage, LineIndent -> 0]}
        },
       Alignment -> {Center, Center},
       ItemSize -> {Automatic, All},
       Spacings -> {0, 0}],
      Background -> White],
    "View Video" :> SystemOpen[$videolink]},
   Appearance -> None,
   BaseStyle -> {},
   FrameMargins -> {{0, 0}, {-2, -2}},
   ImageSize -> {20, 20}];

Answer 2

A couple of images that come with Mathematica. Caveat: There's no guarantee that they will be present in all (future) versions.

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
    "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
    "Help@144dpi.png"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Update

These change color slightly when the mouse is over the button:

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpTiny@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "MenuItemHelpHoverTiny@144dpi.png"}]
   ]
  ],
 Beep[],
 Appearance -> "Frameless"]

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "Help@144dpi.png"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "HelpHighlight@144dpi.png"}]
   ]
  ],
 Beep[], 
 Appearance -> "Frameless"]

Answer 3

Here's the general way this type of thing seems to be handled in the built-in things plus code to build the type of buttons you want.

First the button code:

makeDisk[gradSpec_, n_] :=
  Rasterize[
   Module[{img, disk, edge},
    img =
     RadialGradientImage[
      gradSpec,
      n
      ];
    Graphics[
     {
      Inset[img, Center, Center, Scaled[1]],
      White,
      Annulus[{0, 0}, {1, 2}],
      GrayLevel[.8],
      EdgeForm[Gray],
      Annulus[{0, 0}, {1, 1.1}]
      },
     Background -> None,
     PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
     ImageSize -> n
     ]
    ],
   Background -> None
   ];
With[{n = 80},
 imOut =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, 
   n
   ];
 imHov =
  makeDisk[
   {{.8*n, 5}, {n, n}} ->
    {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, 
    n
   ];
 imIn =
  makeDisk[
   {{.3*n, .6*n}, {n, 5}} ->

    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]},
    n
   ];
 {imOut, imHov, imIn}
 ]

And here's a way to get hover actions and things:

Button[
 Style["asd", White, Bold],
 Appearance ->
  {
   "Default" -> imOut,
   "Hover" -> imHov,
   "Pressed" -> imIn
   }
 ]

Answer 4

When I tried using the methods described here based on the Appearance option for Button it seems that only bitmaps were valid, i.e. primitives didn't seem to be valid ...unless I have not coded correctly.

I normally prefer not to use bitmap images in interfaces because the aesthetics breaks down when the magnification changes -- you can always lock that down but not ideal for your users. Appearance differs across platforms as well. So in an ideal world buttons and controls based on primitives are better.

By redefining @b3m2a1 function this can be achieved:

makeDisk2[gradSpec_, n_] :=
  Module[{img, disk, edge},
   img = RadialGradientImage[gradSpec, n];
   Graphics[{
     Inset[img, Center, Center, Scaled[1]],
     White, Annulus[{0, 0}, {1, 2}], GrayLevel[.8], EdgeForm[Gray], 
     Annulus[{0, 0}, {1, 1.1}]},
    Background -> None,
    PlotRange -> {{-1.2, 1.2}, {-1.2, 1.2}},
    ImageSize -> n]];

With[{n = 30},
 imOut1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .6, 1], Hue[.6, 1, 1], 
     Hue[.6, .3, 1]}, n];
 imHov1 = 
  makeDisk2[{{.8*n, 5}, {n, n}} -> {Hue[.6, .4, 1], Hue[.6, .8, 1], 
     Hue[.6, .3, 1]}, n];
 imIn1 = makeDisk2[{{.3*n, .6*n}, {n, 5}} -> 
    Reverse@{Hue[.6, .6, 1], Hue[.6, 1, 1], Hue[.6, 1, 1]}, n];
 {imOut1, imHov1, imIn1}
 ]

Button[Dynamic@Overlay[{
    Which[
     CurrentValue["MouseOver"] == True&&CurrentValue["MouseButtons"] == {1}, button = imIn1,
     CurrentValue["MouseOver"] == True, button = imHov1,
     True, button = imOut1],
    Style["?", White, 18, Bold]
    },
   Alignment -> Center],
 Appearance -> None]

here is a pick of primitive (top) and raster buttons (bottom) at 100%

and again at 200%