[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: Question Regarding Creating HTML Style Buttons With Org Mode

From: Samuel Banya
Subject: Re: Question Regarding Creating HTML Style Buttons With Org Mode
Date: Fri, 18 Feb 2022 15:04:04 -0500
User-agent: Cyrus-JMAP/3.5.0-alpha0-4778-g14fba9972e-fm-20220217.001-g14fba997

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)



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"



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))))

#+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 

reply via email to

[Prev in Thread] Current Thread [Next in Thread]