Градиентные заливки обычно легче и насыщенней, чем рисуночные подложки, поэтому интересуюсь: можно ли средствами CSS градиентно заполнить капсуло-подобную фигуру (верхняя часть рисунка)? Я её сделал в Cinema4d+Photoshop.
Конечно, если разделить фигуру на составляющие (нижняя часть рисунка), то видно, что средняя прямоугольная часть залита линейным градиентом, а торцы(полукруги) - радиальным, причём - зеркально-симметрично.
А можно ли как-нибудь сшить такие CSS-градиенты, чтоб стыки между ними были незаметны?
Конечно, это можно сделать методом разбиения капсулы на 3 отдельных div'а с абсолютным позиционированием и назначением z-index'а - но получается слишком громоздко. Особенно - при попытке имитировать углубление такой кнопки при нажатии.
А может кто-нибудь поопытней знает, как сделать нечто подобное без расчленения капсулы на составляющие? Подскажите, пожалуйста.

To krvsa:
Да, можно и так. Но опять же - это фактически то же самое "расчленение", влекущее за собой те же громоздкие сложности при имитации нажатия.
Ту ссылку (и многие другие) я тоже видел - кое-что оттуда даже позаимствовал. Но мой вопрос больше акцентирован не именно на создание кнопки, а на возможность сшивания градиентов в НЕрасчленённом div'е.
В любом случае - спасибо за участие.

To mage.lan:
Ух-ты! Это таки вариант! Простенько и со вкусом. И с градиентами возиться не надо :)
А если учесть, что к блоку можно применить одновременно несколько теней - то ...
В общем, это меня вдохновило :)
Спасибо большое!