Also, how could you possible add an 'id' or 'class' attribute to an existing lOrg mode style hyperink?

I ask because I like your approach to just modify the stylesheet, but am unaware of how to actually utilize HTML's concept or 'id' or 'class' in an Org doc itself when using basic Org mode style hyperlinks [[link address][link description]]

Also, I ask because I found a similar video to just style the hyperlink in a similar fashion but would need to somehow assign a class or id value to the HTML element that's exported from the hyperlink itself:

Styling HTML Anchor Tag (Link) To Look Like A Button | CSS Tutorial (https://www.youtube.com/watch?v=p5nogm7ul6A)

Thanks,

Sam

On Fri, Feb 18, 2022, at 2:59 PM, Samuel Banya wrote:

I tried to use this idea, but I'm not sure how to set the 'target' in your example:
[[button:some target][This is a button]]

For example, I tried this:
[[button:http://www.sambanya.com/artgallery.html][Art Gallery Page Link]]

But received this error:
user-error: Unable to resolve link: "button:http://www.sambanya.com/artgallery.html"

Thanks,

Sam

On Thu, Feb 17, 2022, at 5:10 PM, Juan Manuel Macías wrote:
Hi Samuel:

Samuel Banya writes:

> Is it possible to create HTML style buttons using Org Mode itself?

One possibility is to use a custom link. For example:

#+begin_src emacs-lisp
(org-link-set-parameters "button"
   :face '(:foreground "green" :underline t)
   :export (lambda (path desc backend)
     (when (eq backend 'html)
       (format "<form><button class=\"mybutton\" formaction=\"%s\">%s</button></form>" path desc))))
#+end_src

#+HTML_HEAD: <style> .mybutton{background-color:#4CAF50;border:none;color:white;padding:15px32px;text-align:center;text-decoration:none;display:inline-block;font-size:18px;margin:4px2px;cursor:pointer;</style>

[[button:some target][This is a button]]

NB: I have borrowed the style from here: https://www.w3schools.com/csS/css3_buttons.asp

Best regards,

Juan Manuel