个人随笔和一些网文摘录
http://www.dlxp.cn

简单的提交按钮

html:

<a href='#' class='btn'>Submit</a>
<a href='#' class='btn btn-red'>Submit</a>
<a href='#' class='btn btn-green'>Submit</a>
<a href='#' class='btn btn-gray'>Submit</a>
<a href='#' class='btn btn-purple'>Submit</a>
css:
.btn {
  --btnColor: #5eb5ff;
  border: 1px solid var(--btnColor);
  color: var(--btnColor);
  background-color: white;
  padding: 10px 25px;
  text-decoration: none;
  font-family: "Output Sans";
  font-weight: 600;
  border-radius: 3px;
  margin: 5px;
  transition: all .3s ease;
  
  &:hover {
    color: white;
    background-color: var(--btnColor);
  }
}

.btn-red {
  --btnColor: #ff6969;
}

.btn-green {
  --btnColor: #7ae07a;
}

.btn-gray {
  --btnColor: #555;
}

.btn-purple {
  --btnColor: #ef34ef;
}

// just styling the rest of the page

html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}
最终样式:
images
images
源代码地址:https://codepen.io/
文章来自于互联网,请关注原创Leejoa's 老李随笔 » 简单的提交按钮
分享到: 更多 (0)