Stone Buttons en

scanime

Installations 14 Likes 2

About

Takes the standard buttons and turns them into stone. (No Medusas were harmed in the production of this theme.)

Combine with my Fantasy Parchment theme and/or Olessan's Calligraphic Headings!

Credits

Stone texture from a photo by Joshua Hoehne. Available at https://unsplash.com/photos/u7H5JBeSUdU

Sandstone texture from a photo by PPD. Available at https://pixnio.com/textures-and-patterns/rock-stone-texture/sandstone-rock-texture

Red stone texture from a photo by Gregory Schick (aka leadgolem). Available at https://pixnio.com/nature-landscapes/rock-stones/stone-red

Combine with Fantasy Parchment and Calligraphic Headings themes

Latest version 1.1 View content

Released 1 year ago

Added success button, and resized button textures.

Plugin CSS for 1.1


:root {
    --btn-default-border: rgba(0,0,0,0.33);
    --btn-default-hover-border: rgba(0,0,0,0.5);
    --btn-default-hover-text: white;
    --btn-default-hover-background: unset;
}
.btn-default, .btn-primary, .btn-warning, .btn-danger, .btn-success {
    color: white;
    background-color: unset;
    text-shadow: -1px 1px rgb(0 0 0 / 100%), 1px -1px rgb(0 0 0 / 50%);
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 50%), inset 2px 0 0 rgb(0 0 0 / 50%), inset 0 2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset -2px 0 0 rgb(255 255 255 / 50%)!important;
}
.btn-primary {
    border-color: rgba(54,127,169,0.5);
}
.btn-warning {
    border-color: rgba(224,142,11,0.5);
}
.btn:hover, .btn:active {
    text-shadow: 1px -1px rgb(0 0 0 / 100%), -1px 1px rgb(0 0 0 / 50%);
}
.btn-default:hover, .btn-primary:hover, .btn-warning:hover, .btn-danger:hover, .btn-success:hover {
    background-color: unset;
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset 2px 0 0 rgb(255 255 255 / 50%)!important;
}
.btn-default:active, .btn-default.active, .btn-primary:active, .btn-primary.active, .btn-warning:active, .btn-warning.active, .btn-danger:active, .btn-sucess:active {
    background-color: unset;
    box-shadow: inset 0 2px 0 rgb(0 0 0 / 50%), inset -2px 0 0 rgb(0 0 0 / 50%), inset 0 -2px 0 rgb(255 255 255 / 50%), 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), inset 2px 0 0 rgb(255 255 255 / 50%)!important;
}
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary.active {
    border-color: rgba(54,127,169,0.75);
}
.btn-warning, .btn-warning:hover, .btn-warning:active, .btn-warning.active {
    border-color: rgba(224,142,11,0.75);
}
.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger.active {
    border-color: rgba(191,83,41,0.75);
}
.btn-default {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone.jpg)!important;
}
.btn-primary {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone-primary.jpg)!important;
}
.btn-warning {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone-warning-2.jpg)!important;
}
.btn-danger {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone-danger.jpg)!important;
}
.btn-success {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone-success.jpg)!important;
}