Search code examples
cssjinja2python-sphinxrestructuredtext

Make a CSS button a link in Sphinx

I have added a css button from http://www.cssbuttongenerator.com/ to Sphinx using the suggestions from How do I create a global role/roles in Sphinx?. I have

.. role:: button
   :class: button

And I can get it with

:button:`button text`

I now want this button to be a link to cross reference to a different page, basically, be the "text" for 

:ref:`text <Reference>`
Solution

  • Here is a simple Sphinx extension to do the trick. Take the CSS for the button you want and add it as source/_static/button.css (call the tag button).

    Then add button.py alongside source, and add

    sys.path.insert(0, os.path.abspath('..'))

    to your conf.py (if it isn't there already) so that it can find it, and add 'button' to the extensions list in conf.py.

    Then use it like

    .. button::
   :text: Button Text
   :link: link/to/stuff.html

    Thanks a ton to Bryan Van de Ven for writing most of this extension.