ro  fr  en  es  pt  ar  zh  hi  de  ru
ART 2.0 ART 3.0 ART 4.0 ART 5.0 ART 6.0 Pinterest

Beispiel CSS Drop-Menütaste

On May 05, 2021, in Leadership Quantum-XX, by Neculai Fantanaru

Sie können hier den vollständigen Code ansehen:Https: // passatin.com / name 8vdi m2

HTML mit Hilite.ME generiertExample CSS Drop Menu Button

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 mit Hilite.ME generiert

HTML QUELLTEXT:


 lang="en">


     charset="UTF-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1.0">
    Beispiel CSS-Drop-Menüt-Taste |  Neculai Fantanaru (de)



    
     lang="en">

    
         charset="UTF-8">
         http-equiv="X-UA-Compatible" content="IE=edge">
         name="viewport" content="width=device-width, initial-scale=1.0">
        Beispiel CSS-Drop-Menüt-Taste |  Neculai Fantanaru (de)
         rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
         rel="stylesheet" href="style.css">

    

    

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


                     class="category-details">
                         class="category-intro">Where does it come from?

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 1500s, when an unknown printer took a galley of type and scrambled.

class="category-intro--mobile-hidden">
  • Option 1: SU23-NUMBER
  • Always Here Myself
  • href="https://YOURLINK.com" class="button">Trimite class="fa fa-chevron-down icon-down" aria-hidden="true"> class="fa fa-chevron-right icon-right" aria-hidden="true">

    That's all folks.

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

    Außerdem gibt es eineVERSION 2von diesem Code oderVersion 3.oderVersion 4.oderVersion 5.oderVersion 6.


    Latest articles accessed by readers:

    1. An Eye To See And A Mind To Understand
    2. Turn Towards Me With An Eye Full Of Your Own Gaze
    3. The Snapshot Of Magic In God's Universe
    4. Rhythm Of My Heart

    Donează prin Paypal

    Alternate Text

    DONAŢIE RECURENTĂ

    Donează lunar pentru susţinerea proiectului NeculaiFantanaru.com

    DONAŢIE SINGULARĂ

    Donează suma dorită pentru susţinerea proiectului NeculaiFantanaru.com

    Donează prin Transfer Bancar

    Cont Lei: RO34INGB0000999900448439

    Deschis la ING Bank

    Alatura-te Comunitatii Neculai Fantanaru

    decoration
    About | Site Map | Partners | Feedback | Terms & Conditions | Privacy | RSS Feeds
    © Neculai Fântânaru - All rights reserved