好看的button样式，纯CSS

可以使用CSS来制作各种不同的button样式，比如圆角、阴影、渐变、边框等等。以下是一个简单的button样式代码示例：

button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: #3e8e41;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

这个代码可以制作一个绿色的圆角button，当鼠标悬停时会有阴影效果。当然，你也可以根据自己的需要，调整颜色、大小、边框等各种样式属性，来实现自己想要的button样式。

相关问题

纯css3 ui搜索框样式代码

以下是一个简单的纯CSS3搜索框样式代码：

HTML:

<div class="search-box">
  <input type="search" placeholder="Search...">
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

CSS:

.search-box {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.search-box input[type="search"] {
  width: 200px;
  height: 30px;
  padding: 5px 10px;
  border: none;
  border-radius: 20px;
  box-shadow: inset 0 0 5px #ccc;
  font-size: 16px;
}

.search-box button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  outline: none;
}

.search-box button[type="submit"]:hover {
  color: #333;
}

.search-box button[type="submit"] i {
  font-size: 20px;
}

这个代码创建了一个包含输入框和搜索按钮的搜索框组件，输入框使用圆角边框和阴影效果来增加美感，按钮使用了一个FontAwesome图标（需要在HTML文件中引入FontAwesome库）。

轮播图数字按钮纯css

可以使用伪类和CSS属性来实现轮播图数字按钮的效果。

首先，创建一个容器来包含轮播图和数字按钮。然后，为每个数字按钮创建一个a标签，并设置一个data属性来标识它们的顺序。例如：

<div class="slider-container">
  <div class="slider"></div>
  <div class="number-buttons">
    <a href="#" data-slide="1"></a>
    <a href="#" data-slide="2"></a>
    <a href="#" data-slide="3"></a>
  </div>
</div>

接下来，为每个数字按钮设置CSS样式，可以使用伪类和CSS属性来实现：

.number-buttons a {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  border: 2px solid #ccc;
}

.number-buttons a.active,
.number-buttons a:hover {
  border-color: #333;
}

.number-buttons a:before {
  content: attr(data-slide);
  display: block;
  text-align: center;
  line-height: 10px;
  color: #ccc;
  font-size: 8px;
}

.number-buttons a.active:before {
  color: #333;
}

在上面的代码中，我们使用了伪类:before来添加数字文本标识，并使用data属性来设置按钮的顺序。我们还使用了:hover和.active来设置数字按钮的激活状态。

最后，使用JavaScript来控制轮播图的切换，当轮播图切换时，通过添加或删除.active类来更新数字按钮的状态。

var slider = document.querySelector('.slider');
var numberButtons = document.querySelectorAll('.number-buttons a');

function setActiveButton(index) {
  // Remove active class from all buttons
  numberButtons.forEach(function(button) {
    button.classList.remove('active');
  });
  // Add active class to button at index
  numberButtons[index].classList.add('active');
}

// Add event listeners to number buttons
numberButtons.forEach(function(button, index) {
  button.addEventListener('click', function(event) {
    event.preventDefault();
    // Set active button and slide to corresponding index
    setActiveButton(index);
    slider.style.transform = 'translateX(' + (-100 * index) + '%)';
  });
});

以上就是使用纯CSS实现轮播图数字按钮的方法。