:spreadshop: Tipps und Tricks: Die besten Lifehacks

lovetee · November 28, 2018, 7:18pm

Dir gefällt der Button “Personalisieren” auf der Detailseite in deinem Spreadshop nicht?

Vorher:

Nachher:

Code:
removed - see below (old outdated)

EDIT (NEW):

.SprdMain .sprd-detail-images__views > button:nth-child(5) {
    position: absolute;
    top: 40%;
    background-color: red;
    color: white;
    width: 155px;
    max-width: 100%;
    height: 60px;
    left: 64px;
    -webkit-border-radius: 0.2em;
    border-radius: 0.2em;
    border: 0;
    overflow: visible
}
.SprdMain .sprd-detail-images__views > button:nth-child(5) svg {
flex: 1;
    width: 28px;
    height: 28px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: white;
}
.SprdMain .sprd-detail-images__views > button:nth-child(5) span {
  display: none;
}
.SprdMain .sprd-detail-images__views > button:nth-child(5)::after {
    content: "";
    position: absolute;
    left: 151px;
    top: 25px;
    width: 0;
    height: 0;
    border-left: 7.5px solid transparent;
    border-right: 7.5px solid transparent;
    border-top: 7.5px solid red;
    clear: both;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.SprdMain .sprd-detail-images__views > button:nth-child(5)::before {
    content: "Willst du das Produkt anpassen?";
    text-align: left;
    position: absolute;
    left: 50px;
    display: block;
    top: 6px;
    padding: 0;
}

.SprdMain .sprd-detail-images__views > button:nth-child(5):hover {
box-shadow: none;
background-color: darkred
}