Marble Buttons en

scanime

Installations 11 Likes 0

About

Takes the standard buttons and turns them into a fancy looking marble texture.

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

Combine with Fantasy Parchment and Calligraphic Headings themes

Latest version 1.0 View content

Released 1 year ago

Initial Version

Plugin CSS for 1.0


/** plugin: Marble Buttons #1.0 **/
:root {
    --btn-default-text: #444444;
    --btn-default-border: rgba(0,0,0,0.33);
    --btn-default-hover-border: rgba(0,0,0,0.5);
    --btn-default-hover-text: #444444;
    --btn-default-hover-background: unset;
}
.btn-default, .btn-primary, .btn-warning, .btn-danger, .btn-success {
    background-color: unset;
    text-shadow: -1px 1px rgb(0 0 0 / 100%), 1px -1px rgb(0 0 0 / 50%);
    box-shadow: 0 3px 3px rgb(0 0 0 / 30%), 0 0 5px 2px rgb(0 0 0 / 20%), -2px -2px 10px rgb(0 0 0 / 50%) inset, 2px 2px 10px rgb(255 255 255 / 75%) inset!important;
}
.btn-default {
    text-shadow: -1px 1px rgb(0 0 0 / 50%), 1px -1px rgb(255 255 255 / 50%);
}
.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 {
    text-shadow: 1px -1px rgb(0 0 0 / 50%), -1px 1px rgb(255 255 255 / 50%);
}
.btn-default:hover, .btn-primary:hover, .btn-warning:hover, .btn-danger:hover, .btn-success:hover {
    background-color: unset;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 50%) inset, -2px -2px 10px rgb(255 255 255 / 75%) inset!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-marble/marble.jpg)!important;
}
.btn-primary {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-marble/marble-primary.jpg)!important;
}
.btn-warning {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-marble/marble-warning.jpg)!important;
}
.btn-danger {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-marble/marble-danger.jpg)!important;
}
.btn-success {
    background-image: url(https://raw.githubusercontent.com/scanime/kanka/main/css/buttons-marble/marble-success.jpg)!important;
}