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

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

enter image description here

Use ImageSize to control the final size of the button:

enter image description here

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}];

enter image description here


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", "[email protected]"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Button[
 Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
    "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
    "[email protected]"}]
  ],
 Beep[], (* your help dialog here *)
 Appearance -> "Frameless"]

Mathematica graphics

Update

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

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "[email protected]"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Popups", 
     "CodeCompletion", "[email protected]"}]
   ]
  ],
 Beep[],
 Appearance -> "Frameless"]

Button[
 Mouseover[
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "[email protected]"}]
   ],
  Import[FileNameJoin[{$InstallationDirectory, "SystemFiles", 
     "FrontEnd", "SystemResources", "Bitmaps", "Ribbons", "Common", 
     "[email protected]"}]
   ]
  ],
 Beep[], 
 Appearance -> "Frameless"]

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}
 ]

asdasdasd

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

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

enter image description here