Css 背景上带有文本的按钮的反转 colored颜色

发布于02月07日

I try to create a set of nav buttons that look like this

我try 了混合混合模式，但没有成功.有没有人对我应该如何做到这一点有什么建议？到目前为止，我这样做了

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #b3b3b3;
}

.skills-btn {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
  background-color: #000;
  color: white;
  text-decoration: none;
  border-radius: 60px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  width: auto;
  max-width: 45px;
  -webkit-transition: max-width 0.5s;
  transition: max-width 0.5s;
  z-index: 9999;
  margin: 0 2px;
}

.skills-btn:hover {
  max-width: 300px;
}

.icon {
  margin-right: 23px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
}

.text {
  white-space: nowrap;
  padding-right: 15px;
}

.skills {
  position: fixed;
  bottom: 10;
  left: 20;
  font-size: 3.8rem;
  line-height: 1.8em;
  font-family: Roboto, sans-serif;
  font-weight: 600;
}

<div id="nav" class="nav">
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">App Skills </span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Language Skills</span>
  </a>
  <a href="#" class="skills-btn">
    <span class="icon"></span>
    <span class="text">Fields of Experties</span>
  </a>
  <span class="skills">skills</span>
</div>

body { font: 1.2rem/1.6rem Roboto, sans-serif; } .nav { background: #b3b3b3; height: 100vh; display: flex; } .nav-content { display: flex; margin: auto; justify-content: center; align-items: center; gap: 0.4rem; filter: invert(100%); } .skills { position: absolute; font-size: 3.8rem; line-height: 1.8em; font-weight: 600; color: #fff; } .skills-btn { text-decoration: none; border-radius: 4rem; height: 45px; display: inline-flex; white-space: nowrap; align-items: center; overflow: hidden; max-width: 45px; transition: max-width 0.5s; background: #fff; color: #000; mix-blend-mode: difference; } .skills-btn:hover { max-width: 300px; /* Invert on hover and prevent mousemove flickering bug Chrome */ mix-blend-mode: normal; background: #000; color: #fff; filter: invert(100%); } .text { transition: opacity 0.5s; opacity: 0; padding: 0 1.5rem; } .skills-btn:hover .text { opacity: 1; }

<div id="nav" class="nav"> <div class="nav-content"> <span class="skills">skills</span> <a href="#" class="skills-btn"> <span class="text">App Skills </span> </a> <a href="#" class="skills-btn"> <span class="text">Language Skills</span> </a> <a href="#" class="skills-btn"> <span class="text">Fields of Experties</span> </a> </div> </div>

Css 背景上带有文本的按钮的反转 colored颜色

推荐答案

Css相关问答推荐

为什么我的Angular material css文件不工作？

使用背景滤镜时，伪元素出现在div之前

单独.css文件中的样式不适用于Angular 元件

如何以Angular 将下拉面板的宽度与其文本框对齐

如何在Angular material 选项卡中设置自定义圆角下划线的样式

如何在容器查询体中重新定义：Root的CSS自定义属性值？

如何防止css边框缩小div？

SVG文本在移动浏览器上增长并溢出

寻找组件中最大的元素来设置其他组件的高度

MUI Textfield-悬停时输入标签 colored颜色

Firefox中的解决方法：has(不使用JavaScript)

Prettier/VS Code 在 CSS 中的！important 之前添加一个空格，导致它在 WordPress 中崩溃

Tailwind CSS： Select 单选按钮时不应用同行判断的边框

更改 20 个实例中的一个组件的样式

为什么过渡属性不适用于 box-shadow？

边框半径 + 背景 colored颜色 == 裁剪边框

Div Size 自动调整内容大小

如何始终在浏览器中显示垂直滚动条？

删除所有填充和边距表格 HTML 和 CSS

CSS：悬停一个元素，多个元素的效果？