How To Make a Restaurant Website ~Step By Step~ 2026

112SHARES

Default Entire Page Style CSS

span.elementor-icon-list-icon svg {
    margin: 0 !important;
}

span.elementor-icon-list-text {
    padding: 0 !important;
}

.elementor-icon {
    line-height: 0;
}

Button Style CSS

.myBTN {
    line-height: 0;
}

.myBTN a.elementor-button span.elementor-button-icon {
    font-size: 20px;
}

.myBTN a.elementor-button:hover  span.elementor-button-icon svg{
    fill: transparent !important;
}

.myBTN a.elementor-button  span.elementor-button-icon svg path{
    transition: all .3s;
}


.myBTN a.elementor-button::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: inherit;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    z-index: -1;
    transition: all .3s ease;
}

.myBTN a.elementor-button {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.myBTN a.elementor-button:hover::before {
    transform: rotate(0);
}

.btn-brown .elementor-button::before{
    background: #1c1c1c;
}
.btn-black .elementor-button::before{
    background: #c19977;
}

.btn-brown .elementor-button:hover span.elementor-button-icon svg path {
    stroke: #c19977 !important;
}

.btn-black .elementor-button:hover span.elementor-button-icon svg path {
    stroke: #1c1c1c !important;
}

Button Style CSS Classes

myBTN
btn-brown
btn-black

Banner Image Animation Style CSS

.floating-img {
    animation: floating-image 8s ease-in-out infinite alternate;
}

@keyframes floating-image {
    0% {
        transform: translateY(-20px) translateX(0px) rotate(0deg) scale(1);
        background-position-y: 100%;
        filter: brightness(1);
    }
    25% {
        transform: translateY(0px) translateX(10px) rotate(2deg) scale(1.02);
        background-position-y: 75%;
        filter: brightness(1.05);
    }
    50% {
        transform: translateY(20px) translateX(0px) rotate(0deg) scale(1);
        background-position-y: 50%;
        filter: brightness(1.1);
    }
    75% {
        transform: translateY(0px) translateX(-10px) rotate(-2deg) scale(0.98);
        background-position-y: 25%;
        filter: brightness(1.05);
    }
    100% {
        transform: translateY(-20px) translateX(0px) rotate(0deg) scale(1);
        background-position-y: 0%;
        filter: brightness(1);
    }
}

Banner Image Animation Style CSS Class

floating-img

Fish Object Image Animation Style CSS

.fish-image {
    animation: swim-across 10s linear infinite;
}
.fish-image img {
    animation: fish-motion 2.8s ease-in-out infinite;
    transform-origin: center;
}
@keyframes fish-motion {
    0% {
        transform: translateY(0) rotate(0deg) scale(1, 1);
    }
    20% {
        transform: translateY(-6px) rotate(4deg) scale(1.03, 0.97);
    }
    40% {
        transform: translateY(0) rotate(-3deg) scale(0.97, 1.03);
    }
    60% {
        transform: translateY(6px) rotate(3deg) scale(1.02, 0.98);
    }
    80% {
        transform: translateY(0) rotate(-2deg) scale(0.98, 1.02);
    }
    100% {
        transform: translateY(0) rotate(0deg) scale(1, 1);
    }
}
@keyframes swim-across {
    0% {
        transform: translateX(100px) scaleX(1);
    }
    50% {
        transform: translateX(-100px) scaleX(1);
    }
    50.01% {
        transform: translateX(-100px) scaleX(-1);
    }
    100% {
        transform: translateX(100px) scaleX(-1);
    }
}

Fish Object Image Animation Style CSS

fish-image

Single Pages Banner Overlay Style CSS

.banner-boxes {
    backdrop-filter: blur(3px);
}

Single Pages Banner Overlay Style CSS Class

banner-boxes

Single Pages Banner Container Width

calc((100% - 624px - 40px) / 2)