源文件

src/assets/styles/btn.css

@@ -0,0 +1,135 @@
+:export {
+  menuText: #bfcbd9;
+  menuActiveText: #409eff;
+  subMenuActiveText: #f4f4f5;
+  menuBg: #333;
+  menuHover: #444;
+  subMenuBg: #444;
+  subMenuHover: #555;
+  sideBarWidth: 205px;
+}
+
+.blue-btn {
+  background: #324157;
+}
+.blue-btn:hover {
+  color: #324157;
+}
+.blue-btn:hover:before, .blue-btn:hover:after {
+  background: #324157;
+}
+
+.light-blue-btn {
+  background: #3a71a8;
+}
+.light-blue-btn:hover {
+  color: #3a71a8;
+}
+.light-blue-btn:hover:before, .light-blue-btn:hover:after {
+  background: #3a71a8;
+}
+
+.red-btn {
+  background: #c03639;
+}
+.red-btn:hover {
+  color: #c03639;
+}
+.red-btn:hover:before, .red-btn:hover:after {
+  background: #c03639;
+}
+
+.pink-btn {
+  background: #e65d6e;
+}
+.pink-btn:hover {
+  color: #e65d6e;
+}
+.pink-btn:hover:before, .pink-btn:hover:after {
+  background: #e65d6e;
+}
+
+.green-btn {
+  background: #30b08f;
+}
+.green-btn:hover {
+  color: #30b08f;
+}
+.green-btn:hover:before, .green-btn:hover:after {
+  background: #30b08f;
+}
+
+.tiffany-btn {
+  background: #4ab7bd;
+}
+.tiffany-btn:hover {
+  color: #4ab7bd;
+}
+.tiffany-btn:hover:before, .tiffany-btn:hover:after {
+  background: #4ab7bd;
+}
+
+.yellow-btn {
+  background: #fec171;
+}
+.yellow-btn:hover {
+  color: #fec171;
+}
+.yellow-btn:hover:before, .yellow-btn:hover:after {
+  background: #fec171;
+}
+
+.pan-btn {
+  font-size: 14px;
+  color: #fff;
+  padding: 14px 36px;
+  border-radius: 8px;
+  border: none;
+  outline: none;
+  -webkit-transition: 600ms ease all;
+  transition: 600ms ease all;
+  position: relative;
+  display: inline-block;
+}
+.pan-btn:hover {
+  background: #fff;
+}
+.pan-btn:hover:before, .pan-btn:hover:after {
+  width: 100%;
+  -webkit-transition: 600ms ease all;
+  transition: 600ms ease all;
+}
+.pan-btn:before, .pan-btn:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 2px;
+  width: 0;
+  -webkit-transition: 400ms ease all;
+  transition: 400ms ease all;
+}
+.pan-btn::after {
+  right: inherit;
+  top: inherit;
+  left: 0;
+  bottom: 0;
+}
+
+.custom-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: #fff;
+  color: #fff;
+  -webkit-appearance: none;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  padding: 10px 15px;
+  font-size: 14px;
+  border-radius: 4px;
+}