pbl-teacher-table/src/assets/css/button.css

.c_pub_button_confirm {
  color: #fff;
  background-color: #3681fc;
  padding: 0 24px;
  font-size: 14px;
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.c_pub_button_confirm:hover {
  background-color: #4f7cd5 !important;
}

.c_pub_button_confirm + .c_pub_button_confirm {
  margin-left: 20px;
}

.c_pub_button_add {
  color: #3681fc;
  background-color: #fff;
  border: 2px solid #86b3fd;
  padding: 0 24px;
  font-size: 14px;
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.c_pub_button_add:hover {
  background-color: #f0f4fa !important;
}

.c_pub_button_add + .c_pub_button_add {
  margin-left: 20px;
}

.c_pub_button_return {
  color: #3681fc;
  background-color: #e7ebf1;
  padding: 0 24px;
  font-size: 14px;
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.c_pub_button_return:hover {
  /* background-color: #e1e5ea !important; */
  background-color: #dbdbdb !important;
}

.c_pub_button_return + .c_pub_button_return {
  margin-left: 20px;
}

.c_pub_button_return + .c_pub_button_confirm {
  margin-left: 40px;
}

.c_pub_button_delete {
  color: #717c8d;
  background-color: #e7ebf1;
  padding: 0 24px;
  font-size: 14px;
  min-width: 64px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.c_pub_button_delete:hover {
  background-color: #e1e5ea !important;
}

.c_pub_button_delete + .c_pub_button_delete {
  margin-left: 20px;
}

.c_pub_button_delete + .c_pub_button_confirm {
  margin-left: 15px;
}

.pub_btn_add_img2::before,
.pub_btn_finish_img::before,
.pub_btn_last_img::before,
.pub_btn_next_img::before,
.pub_btn_return_img::before,
.pub_btn_delete_img::before,
.pub_btn_paste_img::before,
.pub_btn_add_img::before {
  content: "";
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  background-size: 100% 100%;
  display: block;
  margin-right: 7px;
}

.pub_btn_add_img::before {
  background-image: url(../icon/new/addStage.png);
}

.pub_btn_add_img2::before {
  background-image: url(../icon/new/icon_add.png);
}

.pub_btn_paste_img::before {
  background-image: url(../icon/new/icon_paste.png);
}

.pub_btn_finish_img::before {
  background-image: url(../icon/new/icon_finish.png);
}

.pub_btn_last_img::before {
  background-image: url(../icon/new/icon_last.png);
}

.pub_btn_next_img::before {
  background-image: url(../icon/new/icon_next.png);
}

.pub_btn_return_img::before {
  background-image: url(../icon/new/icon_return.png);
}

.pub_btn_delete_img::before {
  background-image: url(../icon/new/delete_u.png);
}

.r_pub_button_retrun {
  color: #3681fc;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r_pub_button_retrun::before {
  content: "";
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  background-size: 100% 100%;
  display: block;
  margin-right: 7px;
  background-image: url(../icon/new/icon_return.png);
}

.r_pub_button_course {
  color: #fff;
  background-color: #466b99;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  position: relative;
}


.r_pub_button_course::before {
  content: "";
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  background-size: 100% 100%;
  display: block;
  margin-right: 7px;
  background-image: url(../icon/new/upload.png);
}