Doorzichtige ghost buttons
Een van de trends die je nu anno 2017 ziet zijn de zogenaamde ghost buttons, dit zijn buttons met een transparante achtergrond.
Dit is een bijzonder mooi effect vooral indien er foto's op de achtergrond verwerkt zitten.
In dit artikel enkele voorbeelden.
HTML
Voor deze handleiding maak ik gebruik van een HTML <a> element voor het weergeven van de ghost buttons.
<a class="ghost-button" href="#">Ghost button text</a>CSS
Hieronder 8 ghost button variatie, met de volgende namen:
- Basic ghost button
- Rounded corners
- Simple transition effect
- Thick border
- Semi-transparent fade
- Border color fade
- Full color fade
- Size transition effect
1. Basic Ghost Button
Hier is de CSS code om het <a> element er uit te laten zien als een ghost button.
.ghost-button {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}Dat zijn de fundamentele CSS-eigenschappen waardoor de ghost knop er uit ziet. In de andere varianten moeten we gewoon de bovenstaande eigenschappen wijzigen of nieuwe eigenschappen toevoegen.
Wanneer de gebruiker over de ghost button hovert of deze activeert wordt er een visuele aanpassing zichtbaar. Om dit te bereiken, maken we stijlregels voor het zweven en actieve staat met behulp van de :hover en de :active pseudo-classes.
.ghost-button:hover,
.ghost-button:active {
background-color: #fff;
color: #000;
}2. Rounded Corners
Sommige knoppen ghost hebben afgeronde hoeken. Dit gebeurt gemakkelijk door toevoeging van een border-radius eigenschap.
.ghost-button-rounded-corners {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button-rounded-corners:hover,
.ghost-button-rounded-corners:active {
background-color: #fff;
color: #000;
}3. Simple Transition Effect
We kunnen de ghost button interessanter maken, door een subtiele overgangseffect toepassen wanneer de gebruiker er overheen hovert of erop klikt.
In deze variatie gebruiken we de CSS transition eigenschap voor het Infaden / uitfaden van de rand en achtergrondkleur voor ghost button.
.ghost-button-transition {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button-transition:hover,
.ghost-button-transition:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}4. Thick Border
In bepaalde gevallen, zou je een dikkere ghost-knop kunnen maken zodat er eze visueel zwaarder oogt.
Alles wat we moeten doen om dit te bereiken is om de border-size waarde van 1px naar, bijvoorbeeld, 3px.
.ghost-button-thick-border {
display: inline-block;
width: 200px;
font-weight: bold;
padding: 8px;
color: #fff;
border: 3px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button-thick-border:hover,
.ghost-button-thick-border:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}5. Semi-Transparent Fade
In deze Ghost button variatie willen we dat het enkel toestaan is om de achtergrondafbeelding weer te geven via de knop wanneer de gebruiker eroverheen zweeft. Dit leidt tot een interessant visueel effect, vooral wanneer je een goede achtergrondafbeelding hebt.
We bereiken dit effect met behulp van de rgba()functie in de :hover en :activestijl regel. De kleur die we gebruiken voor de achtergrond en rand is wit met een dekking (opacity) van 40%, die wordt vertegenwoordigd als volgt:
rgba(255, 255, 255, 0.4)Echter sinds de rgba()funtie beschikbaar is als nieuwe CSS feature, niet alle browsers zullen het ondersteunen, dus we moeten verklaren effen kleuren met de hexadecimale notatie als fallback.
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}6. Border Color Fade
Een populaire overgangseffect in sommige van de geest-knoppen die ik heb ondervonden is het vervagen van de kleur van de rand en de tekst naar een andere. Dit is vrij eenvoudig te doen met de CSS transition eigenschap.
.ghost-button-border-color {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: border-color 0.3s ease-out,
color 0.3s ease-out;
}
.ghost-button-border-color:hover,
.ghost-button-border-color:active {
color: #66d8ed;
border-color: #66d8ed;
transition: border-color 0.4s ease-in,
color 0.4s ease-in;
}
7. Full Color Fade
Voor een duidelijker overgangseffect, kunnen we in een andere kleur voor de rand en de achtergrond vervagen. Nogmaals, we gebruiken de CSS transition eigenschap, maar deze keer zullen we de overgang de background-color eigenschap gebruiken.
.ghost-button-full-color {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: color 0.3s ease-out,
background-color 0.3s ease-out,
border-color 0.3s ease-out;
}
.ghost-button-full-color:hover,
.ghost-button-full-color:active {
background-color: #9363c4;
border-color: #9363c4;
color: #fff;
transition: color 0.3s ease-in,
background-color 0.3s ease-in,
border-color 0.3s ease-in;
}8. Size Transition Effect
Een andere manier is om animatie ghost buttons door haar vergroten wanneer de gebruiker eroverheen zweeft en vervolgens gunning het terug wanneer de gebruiker zweeft uit. We kunnen dit effect bereiken simpelweg door het toevoegen van 20px aan de width, height, line-height eigenschappen wanneer de gebruiker boven de knop zweeft. Voor deze overgangseffect voelde ik dat de overgangssnelheid van de 0.3s die ik in de andere variaties gebruikt heb te traag, de dus ik paste ik de waarde aan naar 0.1s om de overgang sneller te maken.
.ghost-button-size-transition {
display: inline-block;
width: 200px;
height: 25px;
line-height: 25px;
margin: 0 auto;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: width 0.3s ease-out,
height 0.3s ease-out,
line-height 0.3s ease-out;
}
.ghost-button-size-transition:hover,
.ghost-button-size-transition:active {
width: 220px;
height: 45px;
line-height: 45px;
transition: width 0.1s ease-in,
height 0.1s ease-in,
line-height 0.1s ease-in;
}Samenvatting
De ghost knop is als designtrend is momenteel erg populair. Zoals je hebt gezien, is het gemakkelijk om ghost buttons met behulp van CSS te maken.
De broncode van de demo pagina is op GitHub, voor het geval dat u wilt bekijken of downloaden:
Download source code via GitHub