英文:
How do you use Sass to create hover button color?
问题
我已经在我的编辑器中尝试使用这段代码，但它不起作用，我猜它是用于旧版本的 Bootstrap。
.button {
&:hover {
background-color: black;
color: white;
}
}
我可以通过以下方式更改按钮的字体颜色：
$btn-font-family: {value}
但我不知道如何在悬停时更改按钮的颜色。请帮助我。谢谢你的阅读。
英文:
I've tried using this code in my editor, but it's not working, I'm guessing it's used for older versions of bootstrap.
.button {
&:hover {
background-color: black;
color: white;
}
}
I can change the button font color by using:
$btn-font-family: {value}
But I don't know how to change button color on hover. Please help me.
Thank you for reading.
答案1
得分: 1
你有两种选项来更改 Bootstrap 按钮在鼠标悬停时的背景颜色。
选项1：通过 CSS
添加以下 CSS：
button.btn {
--bs-btn-hover-bg: red;
}
查看下面的示例。
选项2：通过 SASS 变量
这些是用于 Bootstrap 按钮的 SASS 变量：
$background: var(--#{$prefix}body-color);
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
这些 SASS 变量在 button-variant mixin 中使用（请参见 scss/mixins/_buttons.scss 文件）：
@ mixin button-variant(
$background,
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount))
) {
...
}
要影响 Bootstrap 按钮悬停时的背景颜色，您需要控制三个 SASS 变量：
$background$btn-hover-bg-shade-amount$btn-hover-bg-tint-amount
英文:
You have two options to change the Bootstrap button background color on hover.
Option 1: Via CSS
Add the following CSS:
button.btn {
--bs-btn-hover-bg: red;
}
See the snippet below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
button.btn {
--bs-btn-hover-bg: red;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>
<!-- end snippet -->
Option 2: Via SASS variables
Those are all SASS variables for Bootstrap buttons:
$btn-color: var(--#{$prefix}body-color);
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-color: var(--#{$prefix}link-color);
$btn-link-hover-color: var(--#{$prefix}link-hover-color);
$btn-link-disabled-color: $gray-600;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--#{$prefix}border-radius);
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg);
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
$btn-hover-bg-shade-amount: 15%;
$btn-hover-bg-tint-amount: 15%;
$btn-hover-border-shade-amount: 20%;
$btn-hover-border-tint-amount: 10%;
$btn-active-bg-shade-amount: 20%;
$btn-active-bg-tint-amount: 20%;
$btn-active-border-shade-amount: 25%;
$btn-active-border-tint-amount: 10%;
Those SASS variables are used in a button-variant mixin (see scss/mixins/_buttons.scss file):
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
This is the line in the mixin you're interested in:
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount))
It's a conditional expression using the if function. The syntax for the if function is:
if(condition, value-if-true, value-if-false)
As you can see, Bootstrap first checks whether the variable $color is equal to the variable $color-contrast-light:
- If yes (i.e.,
$coloris equal to$color-contrast-light), the value of$hover-backgroundwill be the result of theshade-colorfunction with the parameters$backgroundand$btn-hover-bg-shade-amount. - If no (i.e.,
$coloris not equal to$color-contrast-light), the value of$hover-backgroundwill be the result of thetint-colorfunction with the parameters$backgroundand$btn-hover-bg-tint-amount.
So, there are three SASS variables you need to control to affect the Bootstrap button background color on hover:
$background$btn-hover-bg-shade-amount$btn-hover-bg-tint-amount
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论