1. /* Button container */
    2. .progress-button {
    3.        position: relative;
    4.        display: inline-block;
    5.        text-align: center;
    6.        width: 45%;
    7.        min-width: 250px;
    8.        margin: 10px;
    9. }
    11. /* Button style */
    12. .progress-button button {
    13.        display: block;
    14.        margin: 0 auto;
    15.        padding: 0;
    16.        width: 250px;
    17.        height: 70px;
    18.        border: 2px solid #1ECD97;
    19.        border-radius: 40px;
    20.        background: transparent;
    21.        color: #1ECD97;
    22.        letter-spacing: 1px;
    23.        font-size: 18px;
    24.        font-family: 'Montserrat', sans-serif;
    25.        -webkit-tap-highlight-color: transparent;
    26.        -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
    27.        transition: background-color 0.3s, color 0.3s, width 0.3s, border-width 0.3s, border-color 0.3s;
    28. }
    30. .progress-button button:hover {
    31.        background-color: #1ECD97;
    32.        color: #fff;
    33. }
    35. .progress-button button:focus {
    36.        outline: none;
    37. }
    39. /* Text (transition for when returning to initial state) */
    40. .progress-button button span {
    41.        -webkit-transition: opacity 0.3s 0.1s;
    42.        transition: opacity 0.3s 0.1s;
    43. }
    45. /* Common style of SVGs */
    46. .progress-button svg {
    47.        position: absolute;
    48.        top: 0;
    49.        left: 50%;
    50.        -webkit-transform: translateX(-50%);
    51.        transform: translateX(-50%);
    52.        pointer-events: none;
    53. }
    55. .progress-button svg path {
    56.        opacity: 0;
    57.        fill: none;
    58. }
    60. .progress-button svg.progress-circle path {
    61.        stroke: #1ECD97;
    62.        stroke-width: 5;
    63. }
    65. .progress-button svg.checkmark path,
    66. .progress-button svg.cross path {
    67.        stroke: #fff;
    68.        stroke-linecap: round;
    69.        stroke-width: 4;
    70.        -webkit-transition: opacity 0.1s;
    71.        transition: opacity 0.1s;
    72. }
    74. /* Loading, success and error effects */
    75. .loading.progress-button button {
    76.        width: 70px; /* make a circle */
    77.        border-width: 5px;
    78.        border-color: #ddd;
    79.        background-color: transparent;
    80.        color: #fff;
    81. }
    83. .loading.progress-button span {
    84.        -webkit-transition: opacity 0.15s;
    85.        transition: opacity 0.15s;
    86. }
    88. .loading.progress-button span,
    89. .success.progress-button span,
    90. .error.progress-button span {
    91.        opacity: 0; /* keep it hidden in all states */
    92. }
    94. .success.progress-button button,
    95. .error.progress-button button {
    96.        -webkit-transition: background-color 0.3s, width 0.3s, border-width 0.3s;
    97.        transition: background-color 0.3s, width 0.3s, border-width 0.3s;
    98. }
    100. .success.progress-button button {
    101.        border-color: #1ECD97;
    102.        background-color: #1ECD97;
    103. }
    105. .error.progress-button button {
    106.        border-color: #FB797E;
    107.        background-color: #FB797E;
    108. }
    110. .loading.progress-button svg.progress-circle path,
    111. .success.progress-button svg.checkmark path,
    112. .error.progress-button svg.cross path {
    113.        opacity: 1;
    114.        -webkit-transition: stroke-dashoffset 0.3s;
    115.        transition: stroke-dashoffset 0.3s;
    116. }
    118. /* Optional elastic effect for the width of the button */
    119. .elastic.progress-button button {
    120.        -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1), border-width 0.3s, border-color 0.3s;
    121.        -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
    122.        transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.25, 0.25, 0.4, 1.6), border-width 0.3s, border-color 0.3s;
    123. }
    125. .loading.elastic.progress-button button {
    126.        -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, 0, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
    127.        -webkit-transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
    128.        transition: background-color 0.3s, color 0.3s, width 0.3s cubic-bezier(0.6, -0.6, 0.75, 0.75), border-width 0.3s, border-color 0.3s;
    129. }