JavaScript

2023年03月01日

柏拉文

越努力，越幸运

一、加号

---

Html

<div class="add-button-icon"></div>

Css

.add-button-icon {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #d4d7d7;
    cursor: pointer;
}
.add-button-icon:hover {
    background-color: #00c8c8;
}
.add-button-icon.disabled {
    background-color: #e4e4e4;
    cursor: not-allowed;
}
.add-button-icon::before {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}
.add-button-icon::after {
    content: "";
    width: 2px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

效果

Preview

二、减号

---

Html

<div class="min-button-icon"></div>

Css

.min-button-icon {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #d4d7d7;
    cursor: pointer;
}
.min-button-icon:hover {
    background-color: #00c8c8;
}
.min-button-icon.disabled {
    background-color: #e4e4e4;
    cursor: not-allowed;
}
.min-button-icon::before {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

效果

Preview

三、对号

---

Html

<div class="check-mark-icon"></div>

Css

.check-mark-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #d4d7d7;
    position: relative;
    cursor: pointer;
}
.check-mark-icon:hover {
    background-color: #00c8c8;
}
.check-mark-icon.disabled {
    background-color: #e4e4e4;
    cursor: not-allowed;
}
.check-mark-icon::before {
    content: "";
    width: 16px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 60%;
    left: 20%;
    transform: rotate(45deg);
}
.check-mark-icon:after {
    content: "";
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: rotate(-45deg);
}

四、叉号

---

Html

<div class="close-mark-icon"></div>

Css

.close-mark-icon {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #d4d7d7;
    position: relative;
    cursor: pointer;
}
.close-mark-icon:hover {
    background-color: #00c8c8;
}
.close-mark-icon.disabled {
    background-color: #e4e4e4;
    cursor: not-allowed;
}
.close-mark-icon::before {
    content: "";
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
}
.close-mark-icon:after {
    content: "";
    width: 24px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
}

五、空箭头

---

Html

<div class="empty-arrow-icon"></div>

Css

.empty-arrow-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #d4d7d7;
    position: relative;
}
.empty-arrow-icon::before {
    content: "";
    display: inline-block;
    border-top: 2px solid;
    border-right: 2px solid;
    width: 16px;
    height: 16px;
    border-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-225deg);
}

效果

Preview