Exemplu CSS Drop Menu Button

Name: Exemplu CSS Drop Menu Button | Neculai Fantanaru
Brand: Neculai Fantanaru
SKU: NFL
Availability: OnlineOnly
Rating: 5 (55 reviews)

On Martie 05, 2008

, in

Python Scripts Examples by Neculai Fantanaru YYY

Puteti vizualiza intregul cod aici: https://pastebin.com/mz8vdiM2

CSS CODE:

* {
    margin: 0;
    padding: 0;
    text-rendering: optimizelegibility;
}

.category-wrapper {
    background: #15202a;
    max-height: 100px;
    height: 100px;
    display: flex;
    align-items: center;

    font-family: "Source Sans Pro", 'Helvetica Neue', Helvetica, Arial, sans-serif;


}

.category-section {
    background: #15202a;
    padding: 10px;
    width: 230px;
    box-sizing: border-box;
    margin-top: 5px;
    transition: 2s;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font-weight: 400;
   

}



.category-details-main {
    display: none;
}

.category-section .category-intro {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    margin: 0;
        text-shadow: 1px 1px 10px rgb(0 0 0 / 50%);
}

.category-intro+p {
    margin-bottom: 3px;
    margin-top:8px;
    line-height: 18px;
        text-shadow: 1px 1px 10px rgb(0 0 0 / 50%);
}

.category-section ul {
    margin: 0 0 20px;
    padding: 10px 0 0;
    line-height: 23px;
    list-style: none;
    font-size: 14px !important;
    list-style: none;
   
    font-weight: 500;
        text-shadow: 1px 1px 10px rgb(0 0 0 / 50%);
}

.category-section p,
.category-section ul {
    text-align: left;
   color: RGBA(255,255,255,.75);
    font-size: 11px !important;
}

.category-section a.button,
.category__home-button {
    background: #ffc43a;

    border-radius: 3px;
    display: block;
    color: #2b1d00;
    font-weight: 600;
    margin-top: 10px;
    font-size: 14px;
    padding: 3px;
    -webkit-box-shadow: 0 2px 2px RGBA(0, 0, 0, .95);
    box-shadow: 0 2px 2px RGBA(0, 0, 0, .95);
    text-align: center;
    margin: 10px;
}

.category-section .button {
    margin: 0 !important;
    text-align: center;
}

.category-section a.button,
.category__home-button {
    padding: 10px 10px;
    line-height: 20px !important;
}

.category-wrapper a {
    text-decoration: none;
}

.category-section .icon-right {
    display: none;
}

.category-section:hover .icon-down {
    display: none;
}

.category-section:hover .icon-right {
    display: inline;
}

.category-section:hover .category-details-main {
    display: block;



}

.category-section:hover {
    position: relative;
    top: 90px
}

.category-section .category-intro {
    font-weight: 700;
    font-size: 14px !important;
    color: #fff;
    margin: 0;
        line-height: 24px;
    color: RGBA(255, 255, 255, 0.95);
}

HTML CODE:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="category-wrapper">
            <div class="category-section">
                <div class="category-details-main">


                    <div class="category-details">
                        <p class="category-intro">Where does it come from?</p>
                        <p class="category-intro--mobile-hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 2000s, when an unknown printer took a galley of type and scrambled.</p>
                        <ul class="category-intro--mobile-hidden">
                            <li>Option 1: SU23-NUMBER</li>
                            <li>Always Here Myself</li>
                        </ul>
                    </div>

                </div>
                <a href="https://YOURLINK.com" class="button">Trimite <i class="fa fa-chevron-down icon-down"
                        aria-hidden="true"></i><i class="fa fa-chevron-right icon-right" aria-hidden="true"></i></a>
            </div>
        </div>

    </body>

    </html>

</body>

</html>

That's all folks.

If you like my code, then make me a favor: translate your website into Romanian, "ro".

Also, you can see other Python Codes: VERSION 2 of this code. Or Version 3 OR Version 4 OR Version 5

Puteţi vizualiza şi versiunea de cod în PowerShell or VERSION 2 or VERSION 3

Alatura-te Comunitatii Neculai Fantanaru

Cele 63 de calităţi ale liderului

De ce să citeşti această carte? Pentru că este hotărâtoare pentru optimizarea performanţelor tale. Fiindcă pune accent mai mult pe latura umană decât pe conceptul de business, ceea ce permite cu uşurinţă citirea şi înţelegerea ei.

Trăsătura esenţială a acestei cărţi, faţă de altele existente pe piaţă din acelaşi domeniu, este aceea că descrie, prin exemple, competenţele ideale ale unui lider. N-am susţinut niciodată că eşte uşor să devii un lider foarte bun, dar dacă veţi urma pas cu pas...

Pentru unii lideri „a conduce” înseamnă mai mult a juca un joc de şah, un joc de inteligenţă şi perspicacitate; pentru alţii un joc de noroc, un joc pe care cred că-l pot câştiga mergând de fiecare dată la risc şi pariind totul pe o singură carte.

Am scris această carte, care combină într-un mod simplu dezvoltarea personală cu leadershipul, ca pe un joc de puzzle, unde trebuie să combinaţi toate piesele date pentru a reconstitui imaginea de ansamblu.

Scopul acestei cărţi este de a vă oferi cât mai multe informaţii preţioase prin exemple concrete, şi de a vă arăta o cale prin care să dobândiţi capacitatea de a-i determina pe ceilalţi să vadă lucrurile din aceeaşi perspectivă ca dumneavoastră.

Urmăresc în rândurile acestei cărţi să trezesc interesul omului obişnuit pentru acţiune şi succes. Mesajul acestui volum este că o naţiune puternică este format din oameni puternici şi de succes. Iar fiecare din noi are potenţial, deci succes…

Exemplu CSS Drop Menu Button

Cele mai citite

Cele 63 de calităţi ale liderului

Leadership - Magia măiestriei

Atingerea maestrului

Leadership Puzzle

Performanţa în conducere

Leadership - Pe înţelesul tuturor

Exemplu CSS Drop Menu Button

Cele mai citite

Categories

Cele 63 de calităţi ale liderului

Leadership - Magia măiestriei

Atingerea maestrului

Leadership Puzzle

Performanţa în conducere

Leadership - Pe înţelesul tuturor