Przyciski w HTML i CSS

Jak zrobić i wystylizować przyciski (buttony) w html i css?

Html zawiera składnie do tworzenia przycisku <button></button>, ale w większości przypadków nie ma potrzeby jego użycia. Wystarczy stworzyć zwykły odnośnik, a następnie go wystylizować za pomocą css.

Przycisk 1
        <style>
            .btn{
                background-color: #49aaff;
                color: aliceblue;
                font-size: 24px;
                padding: 10px;
                text-decoration: none;
                transition-duration: 0.4s;
                border: 1px solid #49aaff;
                text-transform: uppercase;
            }
            .btn:hover{
                background-color: aliceblue;
                color: #49aaff;
                border: 1px solid #49aaff;
            }
        </style>
        <a href="" class="btn">Przycisk 1</a>

Chcąc dodać kilka przycisków w jednej sekcji możemy je umieścić w divie o danej klasie i stylizować je poprzez ten element zewnętrzny. Aby wyświetlały się poprawnie przy zmianie rozdzielczości ekranu można dodać do właściwości display: inline-block;

        <style>
            .btn-group a{
                background-color: #ffffff;
                color: #44aaaa;
                border: 1px solid #44aaaa;
                border-radius: 5px;
                font-size: 24px;
                padding: 10px;
                text-decoration: none;
                transition-duration: 0.4s;
                text-transform: uppercase;
                margin:5px 5px;
                display: inline-block;
            }
            .btn-group a:hover{
                background-color: #44aaaa;
                color: #ffffff;
                border: 1px solid #44aaaa;
            }
            .btn-group{
                text-align: center;
            }
        </style>
        <div class="btn-group">
            <a href="">Przycisk 1</a>
            <a href="">Przycisk 2</a>
            <a href="">Przycisk 3</a>
        </div>

Przyciski z efektami animacji. Kody symboli można znaleźć w internecie, np: https://www.htmlsymbols.xyz/. W przypadku html używaj kodu symboli entity, ale zwróć uwagę, że dla tych samych symboli istnieje inny kod, jesli chcesz ich użyć w CSS.

                <style>
            .button {
              border-radius: 4px;
              background-color: #f4511e;
              color: #FFFFFF;
              text-align: center;
              font-size: 28px;
              padding: 20px 30px;
              cursor: pointer;
              position: relative;
              transition: all 0.5s;
              text-transform: uppercase;
            }
            .button:hover{
                background-color: rgb(189, 0, 0);
            }
            .button :first-child{
                padding-left: 10px;
                transition: all 0.5s;
            }
            .button:hover :first-child{
                padding-left: 0px;
            }
            .button :last-child{
                opacity: 0;
                transition: all 0.5s;
                padding-left: 0px;
            }
            .button:hover :last-child {
                opacity: 1;
                padding-left: 10px;
            }
            </style>
            <button class="button"><span>Button</span><span>&#11166;</span></button>
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top