不错css样式

button

样式1


button {
  background: transparent;
  border: 2px solid #00f7ff;
  color: #00f7ff;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
button:hover {
  background: #00f7ff20;
  text-shadow: 0 0 10px #00f7ff;
  box-shadow: 0 0 15px #00f7ff;
}

blockquote

样式一


/* 引用系统 */
blockquote {
  background: linear-gradient(45deg, white 0%, #f8fff8 100%),
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 50 Q50 0 100 50 L50 50 L0 50" fill="%238bc34a" opacity="0.1"/></svg>');
  padding: 2rem;
  margin: 2rem 0;
  border-left: 5px solid var(--grass-green);
  border-radius: 15px;
  position: relative;
  box-shadow: 5px 5px 0 rgba(139, 195, 74, 0.2);
}
blockquote::before,
blockquote::after {
  color: var(--barn-red);
  font-size: 4em;
  font-family: "Comic Sans MS", cursive;
  text-shadow: 2px 2px 0 white;
  position: absolute;
}
blockquote::before {
  content: "“";
  left: -0.5em;
  top: -0.5em;
}
blockquote::after {
  content: "”";
  right: -0.5em;
  bottom: -0.5em;
  text-shadow: -2px -2px 0 white;
}

@media (max-width: 480px) {  
  blockquote {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }  
}