I have polished up some CSS buttons I've been using lately, and have two new ways to quickly use them:

With CSS

Just drop a link tag to data-buttons.css into the head of your HTML and it will apply an orange button style to any element with a [data-button] attribute.

  <link href="data-buttons.css" rel="stylesheet">

There are also different colour themes available with different attribute values:

  <a data-button href="#">button</a>
<a data-button="blue" href="#">button</a>
<a data-button="green" href="#">button</a>
<a data-button="red" href="#">button</a>
<a data-button="grey" href="#">button</a>
<a data-button="outline" href="#">button</a>

data-buttons.css on Github

With JS

Just drop a script tag to data-buttons.js at the end the body of your HTML and it will apply an orange button style to any element with a [data-button] attribute by default.

  <script src="data-buttons.js"></script>

There are also different colour themes available by using different classes:

  <a data-button href="#">button</a>
<a data-button class="blue" href="#">button</a>
<a data-button class="green" href="#">button</a>
<a data-button class="red" href="#">button</a>
<a data-button class="grey" href="#">button</a>
<a data-button class="outline" href="#">button</a>

But, here's the crazy part - you can also specify a custom selector instead of [data-button] by setting the [data-selector] attribute on the script tag where you link to data-buttons.js

For all links:

  <script src="data-buttons.js" data-selector="a"></script>

For all elements with a class of button:

  <script src="data-buttons.js" data-selector=".button"></script>

For one element with an is of button:

  <script src="data-buttons.js" data-selector="#button"></script>

data-buttons.js on Github

This way you can import button styles into any page without having to mark up all of your buttons. This isn't an ideal solution for a production environment, it would be better to save the CSS output on the page and use that instead, but during prototyping or developing this plugin will make it very easy to add CSS button styles to any element or class in whatever HTML you're working on.

I'm wondering about this approach - taking responsive patterns and packaging them as JavaScript plugins that we can call on specific selectors during development, and then use the generated code output from those plugins when it goes into production.

Play around with this and let me know what you think!

778 0 0