Start codelab

Codelab Flow

Get the code - button.css

L Last updated on 13/06/18 P PWA Fire Button

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.

Modern and exciting magical css button. This button is css curated. Get magical with it!
Modern and exciting magical button by PWA Fire Developers, 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;
     }
}
    

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

Mr. PWA Fire's Son Dance Mr. PWA Fire's Son Dance

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

Copyright PWA Fire, 2018. Licensed under an MIT License.

FORK ON GITHUB