Stone Buttons

Stone Buttons

Install
scanime
27th Jun, 2023
35 installations 5 likes

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

Latest version V 1.2.1

Released 1 year ago on 27th Jun, 2023

  • Updated for Kanka 1.43.
    • Fixed font color for yellow/warning/accent buttons

CSS rules

: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, .btn2 {
    color: white!important;
    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-default, .btn2 {
    text-shadow: -1px 1px rgb(0 0 0 / 50%), 1px -1px rgb(255 255 255 / 50%);
}
.btn2.btn-disabled, .btn2.btn[disabled], .btn2.btn:disabled {
  color: unset;
}
.btn-primary {
    border-color: rgba(54,127,169,0.5);
}
.btn-warning {
    border-color: rgba(224,142,11,0.5);
}
.btn:hover, .btn:active, .btn2:hover, .btn2: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, .btn2: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, .btn2.btn-accent:active, .btn2.btn-accent.active, .btn2.btn-error:active, .btn2.btn-error.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,
.btn2.btn-accent, .btn2.btn-accent:hover, .btn2.btn-accent:active, .btn2.btn-accent.active {
    border-color: rgba(224,142,11,0.75);
}
.btn-danger, .btn-danger:hover, .btn-danger:active, .btn-danger.active,
.btn2.btn-error, .btn2.btn-error:hover, .btn2.btn-error:active, .btn2.btn-error.active{
    border-color: rgba(191,83,41,0.75);
}
.btn-default, .btn2 {
    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, .btn2.btn-accent {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-stone/stone-warning-2.jpg)!important;
}
.btn-danger, .btn2.btn-error {
    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;
}
 Install

User comments & reviews