.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 15px 20px;
    background: #f78104;
    color: white;
    border-radius: 6px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    font-family: PROXIMANOVA-BOLD;
}

    .button.heart {
        background-image: url("http://www.give.org/sf-images/default-source/alliance-redesign/heart-simple-shape-silhouette.png");
        background-repeat: no-repeat;
        background-position: center right 20px;
        padding-right: 51px;
    }

        .button.heart:hover {
            background-image: url("http://www.give.org/sf-images/default-source/alliance-redesign/heart-simple-shape-white.png");
            background-repeat: no-repeat;
            background-position: center right 20px;
        }

    .button:hover {
        background: #f2a900;
        text-decoration: none;
    }

    .button.subscribe {
        background-image: url("http://www.give.org/sf-images/default-source/alliance-redesign/paper-plane-orange.png");
        background-repeat: no-repeat;
        background-position: center right 20px;
        padding-right: 51px;
    }

        .button.subscribe:not([data-disabled="disabled"]):hover {
            background-image: url("http://www.give.org/sf-images/default-source/alliance-redesign/paper-plane-white.png");
            background-repeat: no-repeat;
            background-position: center right 20px;
        }

        .button.subscribe[data-disabled="disabled"] {
            opacity: 0.5;
        }
        .button.subscribe[data-disabled="disabled"]:hover {
            background-color: initial;
            cursor: default;
        }

    .button.white-outline {
        border: solid 1px white;
    }

    .button.list {
        background-image: url("https://www.give.org/sf-images/default-source/alliance-redesign/icons/list-orange.png?sfvrsn=f0021a0e_2");
        background-repeat: no-repeat;
        background-position: center right 20px;
        padding-right: 51px;
        border-width: 2px;
        text-decoration: none;
    }

        .button.list:hover {
            background-image: url("https://www.give.org/sf-images/default-source/alliance-redesign/icons/list-white.png?sfvrsn=ee1fa09_2");
            background-repeat: no-repeat;
            background-position: center right 20px;
            color: white;
        }

    .button.eye {
        background-image: url("https://www.give.org/sf-images/default-source/alliance-redesign/icons/eye-orange.png?sfvrsn=155ce6c3_2");
        background-repeat: no-repeat;
        background-position: center right 20px;
        padding-right: 61px;
        text-decoration: none;
        font-family: PROXIMANOVA-REGULAR;
    }

        .button.eye:hover {
            background-image: url("https://www.give.org/sf-images/default-source/alliance-redesign/icons/eye-white.png?sfvrsn=9d261ae0_2");
            background-repeat: no-repeat;
            background-position: center right 20px;
            color: white;
        }

    .button.white-outline {
        border: solid 1px white;
    }

    .button.green {
        background-color: #008c56;
        text-decoration: none;
        font-family: PROXIMANOVA-REGULAR;
    }

        .button.green:hover {
            color: white;
            text-decoration: underline;
        }

    .button.purple {
        background-color: #7474c1;
        text-decoration: none;
        font-family: PROXIMANOVA-REGULAR;
    }

        .button.purple:hover {
            color: white;
            text-decoration: underline;
        }