Style de bouton 3D coloré et cool CSS3 pur-tutoriel CSS-php.cn

Style de bouton 3D coloré et cool CSS3 pur

黄舟

Libérer： 2017-01-17 17:26:42

original

2158 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un style de bouton 3D coloré et sympa réalisé à l'aide d'un dégradé linéaire CSS3. Cet ensemble de boutons est divisé en différentes couleurs, tailles et coins arrondis. Lors de son utilisation, il vous suffit d'ajouter la classe correspondante. C'est simple et pratique.

Comment utiliser

Structure HTML

La structure HTML de base du bouton est très simple, en utilisant un élément de lien hypertexte

<a class="button large regular red" href="javascript:void(0);">Button</a>

Copier après la connexion

Style CSS Le style CSS général du bouton

est le suivant. Le style de texte sur le bouton

.button {
    background-color: #999;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
    border: none;
    border-radius: .5em;
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,0.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                0 .25em .25em hsla(0,0%,0%,.05);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 .5em 1em;
    padding: .5em 1.5em .75em;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    vertical-align: middle;
}
.button:hover {
    outline: none;
}
.button:hover,
.button:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.25),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.05);
}
.button:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.1),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
    margin-top: .25em;
    outline: none;
    padding-bottom: .5em;
}

Copier après la connexion

est le suivant.

.lightText {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                0 .25em .25em hsla(0,0%,0%,.1);
    color: #fff;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.25);
}
.lightText:hover,
.lightText:focus {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 -.2em 0 hsla(0,0%,100%,.1),
                inset 0 -.25em 0 hsla(0,0%,0%,.5),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                0 .25em .25em hsla(0,0%,0%,.1);
}
.lightText:active {
    box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.25),
                inset 0 2px 0 hsla(0,0%,100%,.1),
                inset 0 1.2em 0 hsla(0,0%,100%,.05),
                inset 0 0 0 3em hsla(0,0%,100%,.2),
                inset 0 .25em .5em hsla(0,0%,0%,.05),
                0 -1px 1px hsla(0,0%,0%,.1),
                0 1px 1px hsla(0,0%,100%,.25);
}

Copier après la connexion

Les styles CSS pour différentes tailles, coins arrondis et couleurs de boutons sont les suivants.

/* Large */
.large {font-size: 1.25em;}
 
/* Medium */
.medium {font-size: 1em;}
 
/* Small */
.small {font-size: .75em;}
 
/* Regular */
.regular {border-radius: .5em;}
 
/* Square */
.square {border-radius: .25em;}
 
/* Round */
.round {border-radius: 1.25em;}
 
/* Red */
.red {background-color: #ff6c6f;}
 
/* Orange */
.orange {background-color: #f6cf6f;}
 
/* Yellow */
.yellow {background-color: #fff6c6;}
 
/* Green */
.green {background-color: #6fcf6f;}
 
/* Blue */
.blue {background-color: #6fc6ff;}
 
/* Purple */
.purple {background-color: #f6c6ff;}
 
/* White */
.white {background-color: #eee;}
 
/* Grey */
.grey {background-color: #999;}
 
/* Black */
.black {background-color: #444;}

Copier après la connexion

Ce qui précède est le style de bouton 3D de couleur cool CSS3 pur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !