PWA Fire Codelabs - Add taste to your web app buttons with PWA Fire Button.

Start codelab

Codelab Flow

Get the code - button.css

Last updated on 13/06/18

First, you need to get the code. Replace your button's stylng with the code snippet below or just create a button.css file and add the code to it.

Description View Code On Github -

Modern and exciting magical css button. This button is css curated. Get magical with it!

Modern and exciting magical button by Project PWA Fire, available at PWA Fire Codelabs. Find Demo buttons LIVE on Project PWA Fire made Progressive Web App here.

   
/** pwafire-for-developers - codelab - add-pwafire-button **/
@media only screen and (min-width: 61.16667em)
{
  .pwafire-button {
    background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
    border-radius: 100px;
    padding: 10px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    display: inline-block;
    box-shadow: 0 0.375rem 1.25rem 0 rgba(61, 66, 80, .18);
    font-family: "Avenir Next W01", Lato, Roboto, Arial, sans-serif;
    cursor: pointer;
    line-height: 1.0;
     }
}

Get code

Add button.css to your page(s)

Add a link tag to all the pages that encompass our web app inside the head tag, as follows;

<!-- in your head tag-->
<link rel="stylesheet" href="/button.css">

Define the button class

To your pages, add "pwafire-button" class to your button as shown in the example below.

<!-- to-your-button -->
<a class="pwafire-button" href="https://twitter.com/wtmeldoret">Learn more here</a>

Yay! Done! Launch your project! You just made a magical button! Checkout demo buttons on this progressve web app

What's next?

We shall be publishing another codelab that will allow you to customize your button's color gradient with our PWA Fire color selector

Support

Donate a Star and Contribute in any way. Be sure to follow us on Twitter. If you use pwafire-button kindly let us know via info@pwafire.org or JUST simply Tweet us

License

FORK ON GITHUB