/* Button */
.btn {
    margin: 0.25em;
    float: left;
    clear: both;
    font-family: monospace;
    white-space: nowrap;
}
/* Button elements */
.btn > span,
.btn--icon > i {
    padding: 0.5em 1em;
    display: inline-block;
    transition: 0.25s all;
}
.btn > span {
    border-radius: 0.25em;
    white-space: nowrap;
    color: #222;
    background: #ddd;
    width: 500px; /* jim */
    
}
.btn:hover > span,
.btn:focus > span {
    background: lightgreen;
}
.btn:active > span {
    background: limegreen;
    transition: none;
}
/* Button with an icon */
.btn--icon > i {
    border-radius: 0.25em 0 0 0.25em;
    position: relative;
    font-weight: bold;
    font-style: normal;
    color: white;
    background: #222;
}
.btn--icon > i:after {
    content: "";
    border: 0.35em solid;
    border-color: transparent transparent transparent #222;
    position: absolute;
    top: 0.775em;
    right: -0.65em;
}
.btn--icon:hover > i,
.btn--icon:focus > i {
    color: #ddd;
}
.btn--icon > span {
    border-radius: 0 0.25em 0.25em 0;
}
/* Button custom states */
.btn--favorite:hover > i,
.btn--favorite:focus > i { color: gold; }
.btn--add:hover > i,
.btn--add:focus > i { color: lightblue; }
.btn--delete:hover > i,
.btn--delete:focus > i { color: orangered; }
.btn--favorite > span { background: gold; }
.btn--add > span { background: lightblue; }