CSS学习 02 利用鼠标悬停制造按钮边框的渐变方向变化

在这里插入图片描述

效果

页面背景为深灰色，使用Karla字体。
容器内的按钮居中显示，按钮有一个彩色渐变的边框。
按钮的背景为黑色，文字为浅灰色。
当鼠标悬停在按钮边框上时，边框的渐变方向变化，按钮文字变为白色，并且按钮内边距稍微增大。

在这里插入图片描述

<!doctype html>
<html><head><title></title><link rel="stylesheet" href="index.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,800;1,200&display=swap" rel="stylesheet"></head><body><div class="container"><div class="button-border"><button type="button" class="button">Start Coding!</button></div></div></body>
</html>

<button type="button" class="button">：一个类名为 button 的按钮元素，按钮类型为 button。

html, body {margin: 0;padding: 0;background-color: var(--body-bg);font-family: var(--font-family);
}:root {--font-family: 'Karla', sans-serif;--body-bg: #1E1F25;--btn-bg: #000;--btn-color: #cbcbcb;	/*按钮文字颜色（浅灰色）*/--btn-color-hover: #fff;	/*按钮文字悬停时的颜色（白色）*/--grad-color1: #eeaf61;--grad-color2: #fb9062;--grad-color3: #ee5d6c;--grad-color4: #ce4993;--grad-color5: #6a0d83;
}.container {display: flex;justify-content: center;	/*水平居中对齐*/align-items: center;	/*垂直居中对齐*/height: 100vh;
}.button-border {background: linear-gradient(115deg, #eeaf61, #fb9062, #ee5d6c, #ce4993, #6a0d83);	/*设置一个115度的线性渐变背景*/padding: 2px;
}.button {border: none;background: var(--btn-bg);color: var(--btn-color);padding: 1em 1.5em;font-family: inherit;letter-spacing: .1em;
}.button-border:hover {background: linear-gradient(230deg, #eeaf61, #fb9062, #ee5d6c, #ce4993, #6a0d83);	/*渐变角度改为230度*/
}.button-border:hover .button {color: var(--btn-color-hover);padding: 1.1em 1.6em;
}