Re: Question Regarding Creating HTML Style Buttons With Org Mode

["Samuel Banya" <sbanya@fastmail.com>]

[-- Attachment #1: Type: text/plain, Size: 2130 bytes --]

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

[-- Attachment #2: Type: text/html, Size: 3327 bytes --]