Zeroclickinfo-goodies: CSS: Create Neww CSS Button Generator Instant Answer

[tagawa]

Description

We have a nice CSS animations Instant Answer here: https://beta.duckduckgo.com/?q=CSS+Animations&ia=answer
It would be great to have a similar one showing demos of CSS buttons.

The CSS animations backend and frontend files are listed here, for reference: https://duck.co/ia/view/css_animations

The demos themselves can be created on Codepen with a preview for each one shown in the Instant Answer. Does anyone fancy taking this up?

Related: #3816

People to notify

@hchienjo

Get Started

• [ ] 1) Claim this issue by commenting below
• [ ] 2) Review our Contributing Guide
• [ ] 3) Set up your development environment, and fork this repository
• [ ] 4) Create a Pull Request

Resources

• Join DuckDuckHack Slack to ask questions
• Join the DuckDuckHack Forum to discuss project planning and Instant Answer metrics
• Read the DuckDuckHack Documentation for technical help

[manrajgrover]

@tagawa I can take this one up. 😄 Please share as to what exactly needs to be shown in demos.

[tagawa]

Cool, thank you @ManrajGrover. We should re-use the format of the CSS animations IA so each box should show a button, and the box links to the source code on Codepen. Because all Codepen public projects are open source (MIT license) we can use them and link to them freely. It's also possible to copy the code into a new Codepen entry if we need to make any edits, but we should leave a message in the comments with the URL of the original. Depending on the CSS, some of the examples may need resizing to fit in the IA boxes.

For inspiration, here are a couple of blog posts highlighting some CSS buttons on Codepen:

• http://quickwebresources.com/15-css-buttons-examples-codepen
• https://www.sanwebe.com/2013/01/40-css-buttons-from-codepen

[manrajgrover]

@tagawa Works. These buttons look great! Should we shortlist which ones we should show?

[tagawa]

@ManrajGrover Yes, just a few - say, less than ten - would be fine. And you don't have to use the ones in those articles, you can create your own if you like.

[moollaza]

@tagawa @ManrajGrover I don't think we want demos of buttons, but rather a CSS Button generator, like:

• http://css3buttongenerator.com/
• http://www.cssbuttongenerator.com/
• https://css-tricks.com/examples/ButtonMaker/
• etc (https://duckduckgo.com/?q=css+button+generator&ia=web)

A tool like this would be much more useful than simply showing demos

[TaiWilkin]

I would like to give this a try if it's still open! :)

[hchienjo]

@TheresaWilkin Thanks for offering to take this up. It's all yours.

[TaiWilkin]

Does this need to be linked up with https://duck.co/ia/view/css_button_generator here? I'm also not able to get a trigger working on Duckpan Server when I'm trying that out, am I missing some steps? @hchienjo

[moollaza]

Does this need to be linked up with https://duck.co/ia/view/css_button_generator here?

Yes it does. Sorry for the late reply. Your IA Page has been enabled you should now be able to test in DuckPAN 👍

[Katherraptor]

@TheresaWilkin @moollaza I don't see any movement on this but I think it would be a really useful feature, anything I can do to help? Happy to jump in

[kirkins]

@KatherineGShaw I think it's just a matter of someone making a Goodie and pull request now.

The Goodie will consist of at least 3 files:

• lib/DDG/Goodie/CssButtonGenerator.pm
• t/CssButtonGenerator.t
• share/goodie/css_button_generator/content.handlebars

You'll probably also want to include a CSS and JS file for an advanced GUI module like this:

• share/goodie/css_button_generator/css_button_generator.css
• share/goodie/css_button_generator/css_button_generator.js

I find it useful to look at other Goodies. Pull requests like this one can be useful to see all the changes required on a single page. _Though that particular one seems to have some issues and hasn't been merged, it is a good example of structure._

Are you familiar with using Codio and Duckpan?

[Katherraptor]

@kirkins Thank you for the quick response! Not yet but I've gone through the tutorial in the docs for using Codio and Duckpan and feel pretty confident in the workflow and tooling. Thank you for linking that pull request, that will be invaluable. To get started would I create an issue on the existing IA page?

[kirkins]

@KatherineGShaw No need to open another issue. Just make a pull request and reference this issue #3815.