Make your buttons pretty!

[tylerwince]

📋 Describe the new feature/idea/enhancement you are requesting

This css snippet will make your buttons really pretty. Nice when used in conjunction with {{}} for executing Smartblocks as described here: https://roamresearch.com/#/app/roamhacker/page/qFqLurfD6

This came from the Zenith codebase.

/* BUTTON */
.block-bullet-view .bp3-button:not([class*="bp3-icon"]) {
    background: transparent !important;
    color: rgb(30,144,255) !important;
    padding: 4px 14px;
    line-height: 2em;
    font-weight: 600;
    border-radius: 2em !important;
    border: 1px solid rgba(30,144,255, 0.5) !important;
    box-shadow: none !important;
}

[GitMurf]

@tylerwince awesome! Abhay has also posted some CSS so I made label for CSS and then also tag it as a "smartblock" even though it isn't but want to use that because it tags as "example code" for people to use. Thanks for this.

[mlava]

Here's my preference, with an added hover effect as a bonus:

/* BUTTON */
.block-bullet-view .bp3-button:not([class*="bp3-icon"]) {
    background: transparent !important;
    color: rgb(30,144,255) !important;
    padding: 4px 10px;
    line-height: 1em;
    font-weight: 600;
    border-radius: 2em !important;
    border: 2px solid rgba(30,144,255, 0.5) !important;
    box-shadow: none !important;
}
.block-bullet-view .bp3-button:not([class*="bp3-icon"]):hover {
    background: rgb(30,144,255) !important;
    color: #1B1D21 !important;
    border: 2px solid rgba(30,144,255, 0.5) !important;
}

Note: change color: #1B1D21 !important; in the hover css to whatever your usual Roam background colour is. I use a dark theme so color: #1B1D21 !important; matches.

[JasperGeh]

not([class*="bp3-icon"]) also targets the block-ref and code block language buttons. not([class*="bp3-minimal"]) does not; only the SmartBlocks Buttons are affected as far as I can tell