Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen

Kurzes Tutorial

Dies ist ein cooler, farbenfroher 3D-Schaltflächenstil, der mit einem linearen CSS3-Verlauf erstellt wurde. Dieses Tastenset ist in verschiedene Farben, Größen und abgerundete Ecken unterteilt. Bei der Verwendung müssen Sie nur die entsprechende Klasse hinzufügen. Es ist einfach und praktisch.

So verwenden Sie

HTML-Struktur

Die grundlegende HTML-Struktur der Schaltfläche ist sehr einfach. Sie wird mithilfe eines Hyperlink-Elements erstellt.

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

CSS-Stil Der allgemeine CSS-Stil der Schaltfläche

ist wie folgt. Der Textstil auf der Schaltfläche

.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;
}

ist wie folgt.

.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);
}

CSS-Stile für verschiedene Größen, abgerundete Ecken und Farben von Schaltflächen sind wie folgt.

/* 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;}

Das Obige ist der reine CSS3-Farb-3D-Schaltflächenstil. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!