Y yo lo que no entendía era precisamente lo del degradado jejeje, ya que no hay ningún degradado en esos botones, son colores lisos.
Paso 1.- Te creas un archivo nuevo, con fondo transparente y (según tu ejemplo) de medidas: 260 px de ancho y 35 px de alto.
Paso 2.- Tomas tu herramienta Forma Personalizada (Tecla U) y creas tu rectángulo, teniendo en cuenta que NO abarque todo el tamaño de tu lienzo, si se te hace mas sencillo, usa líneas guía para tal fin.
Nota.- Como he entendido, tu quieres un botón transparente, con el contorno negro y con la sombra... así que hagamos lo siguiente:
Paso 3.- Te vas a tu Capa donde tienes trazado tu rectángulo y le quitas todo el relleno (Relleno 0%), entonces das click con Botón Derecho sobre esta (para PC, si es MAC click con "manzanita"+ clik ratón) y das click en la opción emergente "Opciones de Fusión".
Paso 4.- En la ventana que aparece (Estilos de Capa) metes trazo a tu gusto y sombra paralela, como desde el principio has manejado fondo transparente, te queda algo mas o menos así:
Ultimo Paso.- Ya sólo resta que des click en Menú Archivo - Guardar para web y para que te respete la transparencia escoges el formato GIF.
¿El problema? La sombra se hace un poco dura y se ve un poco tosca.
¿La solución? Guardar como PNG en esta misma ventana a expensas de que sabemos que PNG no lo soporta IE si no es con un plugin, en Firefox no hay problema.
Pero bueno, lo que pedías ya está.
Aquí el GIF:
Aquí el PNG (Y juro que aunque se ve gris en Internet Explorer, en realidad es transparente):
"Bueno... eso creo jijiji".
De cualquier manera me doy un tiempo para checar este post horas mas tarde, saludos.