Stone Buttons

Stone Buttons

Install
scanime
27th Jun, 2023
56 installations 10 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 3 years 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