Start codelab

Codelab Flow

Get the code - button.css

L 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.
/** pwafire-button **/

@media only screen and (min-width: 61.16667em)
  .pwafire-button {
    background: linear-gradient(36deg, #0dd3ff, #0389ff, #1c79c0);
    border-radius: 100px;
    padding: 10px;
    height: 20px;
    width:150px; /** customize **/
    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;
    font-size: 15px;
    cursor: pointer;
    line-height: auto;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;

*, ::after, ::before {
    box-sizing: unset;

/** set what happens on focus **/
.pwafire-button:focus {
    outline: 0px dotted;
    color: #0dd3ff;
    outline: 0px auto -webkit-focus-ring-color;


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.

  <!-- USE -->
  <a class="pwafire-button" href="" rel="noopener">
  Learn more here

  <!-- OR -->
  <button class="pwafire-button">
  Learn more

  <!-- OR -->
  <div class="pwafire-button">
  Learn more here

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


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 or JUST simply Tweet us


Licensed under an MIT License.