商丘专业做网站,设计制作小船,北京做网站建设多少钱,精美驾校企业网站模板效果演示 实现了一个彩色按钮特效#xff0c;包括一个按钮#xff08;button#xff09;和一个前景色#xff08;::before#xff09;。按钮具有四种不同的颜色#xff0c;当鼠标悬停在按钮上时#xff0c;前景色会出现渐变效果#xff0c;并且按钮的颜色、文本阴影和边…效果演示 实现了一个彩色按钮特效包括一个按钮button和一个前景色::before。按钮具有四种不同的颜色当鼠标悬停在按钮上时前景色会出现渐变效果并且按钮的颜色、文本阴影和边框阴影会发生变化。整个按钮具有立体感使其看起来更加美观。 Code
HTML
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title彩色浮雕按钮/titlelink relstylesheet href./25-彩色浮雕按钮.css
/headbodybutton求点赞/buttonbutton求关注/buttonbutton求收藏/buttonbutton求转发/button
/body/htmlCSS
* {margin: 0;padding: 0;
}body {height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: #e8e8e8;
}button {margin: 10px;width: 280px;height: 90px;font-size: 35px;font-weight: bold;background: transparent;border: 1px solid transparent;cursor: pointer; position: relative;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px #808080;color: #333;text-shadow: 1px 1px 0 #808080;overflow: hidden;transition: 0.3s linear 0.15s;
}button:nth-child(1) {--c: #ff4757;
}button:nth-child(2) {--c: #ffa502;
}button:nth-child(3) {--c: #2ed573;
}button:nth-child(4) {--c: #1e90ff;
}button::before {content: ;position: absolute;width: 100px;height: 8px;top: 0;left: 50%;transform: translateX(-50%);border-radius: 0 0 50% 50%;filter: blur(5px);transition: 0.3s;
}button:hover::before {background: var(--c);box-shadow: 0 0 10px var(--c),0 0 20px var(--c),0 0 30px var(--c),0 0 40px var(--c),0 0 50px var(--c);
}button:hover {color: #fff;text-shadow: 0 0 10px var(--c),0 5px 5px #000;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px var(--c);
}实现思路拆分
好的下面是每行代码的详细讲解及注释
* {margin: 0;padding: 0;
}这段代码是设置所有元素的外边距和内边距为0。
body {height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: #333;
}这段代码是设置body元素的高度为100vh使用flex布局使其水平和垂直居中。同时设置flex-direction为column使其内部元素垂直排列。并且设置背景颜色为#333。
button {margin: 10px;width: 280px;height: 90px;font-size: 35px;font-weight: bold;background: transparent;border: 1px solid transparent;position: relative;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px #808080;color: #333;text-shadow: 1px 1px 0 #808080;overflow: hidden;transition: 0.3s linear 0.15s;
}这段代码是设置按钮的样式。包括外边距、宽度、高度、字体大小、字体粗细、背景、边框、相对定位、内部阴影效果、字体颜色和文本阴影效果。并且设置过渡效果。
button:nth-child(1) {--c: #ff4757;
}button:nth-child(2) {--c: #ffa502;
}button:nth-child(3) {--c: #2ed573;
}button:nth-child(4) {--c: #1e90ff;
}这段代码是为每个按钮设置不同的颜色。使用CSS变量–c来存储颜色值。
button::before {content: ;position: absolute;width: 100px;height: 8px;top: 0;left: 50%;transform: translateX(-50%);border-radius: 0 0 50% 50%;filter: blur(5px);transition: 0.3s;
}这段代码是设置前景色的样式。使用伪元素::before设置宽度、高度、相对定位、顶部和左侧偏移、圆角和模糊效果。并且设置过渡效果。
button:hover::before {background: var(--c);box-shadow: 0 0 10px var(--c),0 0 20px var(--c),0 0 30px var(--c),0 0 40px var(--c),0 0 50px var(--c);
}这段代码是设置当鼠标悬停在按钮上时前景色的渐变效果。使用:hover伪类设置背景颜色和阴影效果。
button:hover {color: #fff;text-shadow: 0 0 10px var(--c),0 5px 5px #000;box-shadow: inset 1px 1px 2px #000,inset -1px -1px 2px var(--c);
}这段代码是设置当鼠标悬停在按钮上时按钮的颜色、文本阴影和边框阴影的变化。使用:hover伪类设置字体颜色、文本阴影效果和内部阴影效果。
