1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

ROZWIĄZANE Zmiana koloru przycisku

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika Trzy Marchewki, 28 Marzec 2018.

  1. Trzy Marchewki

    Trzy Marchewki Użytkownik

    Wiadomości:
    58
    Docenione treści:
    9
    Na kolejnym etapie zamówienia mamy w koszyku trzy przyciski: "zarejestruj się", "złóż zamówienie" i "zaloguj się". Po najechaniu myszką na jeden z tych przycisków zmieniają one kolor z czarnego na szary.
    Chciałbym zmienić kolor tylko pierwszego przycisku np. na fioletowy, turkusowy lub niebieski.
    Jak to zrobić tak żeby nowy kolor zmieniał się na o wiele jaśniejszy tak jak w oryginale z czarnego na szary?
    Wpisałem:
    button.btn.btn-red.important.register {
    background-color: #902d2d;
    border: 1px solid #902d2d;
    }
    i co dalej?
    Będę wdzięczny za pomoc.
     
  2. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    Hej @Trzy Marchewki! Dodaj :hover po register :) To spowoduje działanie CSS w przypadku najechania kursora na wybrany element czyli:

    Kod:
    button.btn.btn-red.important.register:hover {
        background-color: #902d2d;
        border: 1px solid #902d2d;
    }
    Powinno działać bo sprawdzałem :)
     
  3. Trzy Marchewki

    Trzy Marchewki Użytkownik

    Wiadomości:
    58
    Docenione treści:
    9
    Zmienia się z czarnego w kolor. Wolałbym odwrotnie.
    W sumie jest taki przycisk o krok wcześniej w koszyku i nazywa się "zamawiam". Próbuję coś grzebać ze stylem tego przycisku ale nie wychodzi mi.
     
  4. michalhockey

    michalhockey Opiekun

    Wiadomości:
    174
    Docenione treści:
    44
    No to na chłopski rozum dodaj te dwa kody do CSS i dostosuj sobie kolory jakie chcesz.
     
  5. LukaszC

    LukaszC eCommerce Team home.pl

    Wiadomości:
    973
    Docenione treści:
    108
    Tak jak @michalhockey napisał powinno działać. Podaje ci gotowca (po najechaniu czarny przed czerwony)
    Kod:
    .btn.btn-red.important.register:hover {
    
        background: black;
    
    }
    .btn.btn-red.important.register {
    
        background: red;
    
    }
     
  6. Trzy Marchewki

    Trzy Marchewki Użytkownik

    Wiadomości:
    58
    Docenione treści:
    9
    @michalhockey dzięki za inspirację.
    @LukaszC serdeczne dzięki za kompleksowe rozwiązanie.
    Wstawiłem swoje kolory i trzeba było jeszcze dodać kolory ramki przycisku dla obu kolorów.
    Publikuję finalny kod dla innych, którzy ewentualnie będą potrzebować.
    Kod:
    .btn.btn-red.important.register:hover {
        background: #b1b1b1;
        border-color: #b1b1b1;
    }
    .btn.btn-red.important.register {
        background: #f27022;
        border-color: #f27022;
    }
    
     
    Mariusz lubi to.

Poleć forum znajomym