css实现按钮鼠标悬浮背景发光效果代码-html代码-BFW代码库

css实现按钮鼠标悬浮背景发光效果代码

代码语言：html

所属分类：悬停

代码描述：css实现按钮鼠标悬浮背景发光效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">


<style>
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");

:root {
  --h: 222;
  --s: 20%;
  --l: 22%;
  
  --canvas: var(--h);
  --bg: hsl(var(--canvas), 15%, 22%);
  --fg: hsl(var(--canvas), 39%, 95%);
  --link: hsl(var(--canvas), 90%, 80%);
  --linkh: hsl(150, 95%, 70%);
  --wgt: 200;

  --light: hsl(var(--h), var(--s), 95%);
  --dark: hsl(var(--h), var(--s), 20%);
  --tint: hsl(160, 85%, 60%);
  --tint2: hsl(200, 85%, 60%);
  --pads: 16px;
  --cols: 1fr;
  
  --labels: hsl(var(--h), var(--s), 40%);
  --b: hsla(var(--h), var(--s), 100%, 1);
  --svg: var(--fg);
}

#app {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--pads);
  min-height: 100%;
}

body {
  padding: calc(var(--pads) * 1.5);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  background-color: #171820;
  background-image: linear-gradient(
    180deg,
    hsl(var(--h), var(--s), 8%),
    hsl(var(--h), var(--s), 14%)
  );
  background-size: cover;
}

body,
html {
  min-height: 100%;
}

* {
  box-sizing: border-box;
}

form {
  color: var(--fg);
  background-color: var(--bg);
  min-width: 100%;
  width: 100%;
  padding: calc(var(--pads) * 0.5) calc(var(--pads) * 1.5) calc(var(--pads) * 1);
  border-radius: 8px;
  box-shadow: 0 2px 3px hsla(var(--h), var(--s), 8%, 50%);
}

form {
  --bor: hsl(var(--h), var(--s), 85%);
  --bg: var(--light);
  --fg: var(--dark);
}

.dark {
  --bor: hsl(var(--h), var(--s), 35%);
  --bg: var(--dark);
  --fg: var(--light);
  --labels: hsl(var(--h), var(--s), 65%);
  --b: hsla(var(--h), var(--s), 12%, 1);
  --tint: hsl(260, 85%, 60%);
  --tint2: hsl(300, 85%, 60%);
}

fieldset {
  min-width: 100%;
  width: 100%;
  border: 1px solid var(--bor);
  border-radius: 5px;
  padding: var(--pads) calc(var(--pads) * 1.5);
  margin-block: var(--pads);
}

legend {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 2em;
  transform: translateX(-1em);
}

label {
  display: block;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  font-size: 0.875rem;
  text-transform: uppercase;
  -webkit-margin-start: 0;
  margin-inline-start: 0;
  -webkit-margin-after: 0.5em;
  margin-block-end: 0.5em;
  color: var(--labels);
  transition: all 0.5s ease;
}

.field:focus-within label {
  color: var(--fg);
}

.field {
  margin-block: 2.5em;
}

.field:nth-of-type(1) {
  -webkit-margin-before: 1em;
  margin-block-start: 1em;
}

.field:nth-last-of-type(1) {
  -webkit-margin-after: 1em;
  margin-block-end: 1em;
}

input,
select,
button,
textarea {
  font-family: inherit;
  color: var(--fg);
  background: var(--b);
  padding: 0.875em;
  border-radius: 8px;
  border: 1px solid transparent;
  outline: 1px solid transparent;
  accent-color: var(--tint2);
  box-shadow: 0 3px 2px -3px var(--bor);
  transition: border 0.3s ease-in, outline 0.6s ease-in, box-shadow 0.6s ease-in;
}
input,
select, 
textarea {
  width: clamp(50%, 20em, 100%);
}
input:focus,
select:focus,
button:focus,
textarea:focus {
  border-color: var(--tint);
  outline-color: var(--tint2);
  transition: border 0.6s ease-out, outline 0.3s ease-out,
    box-shadow 0.3s.........完整代码请登录后点击上方下载按钮下载查看