CSS Effecten voor meer marketing waarde!

augustus 28, 2019
Toopix
CSS

Duidelijkheid over klikbare links

Wilt u uw webpagina bezoekers duidelijk laten merken welk gedeelte van uw website of pagina klikbaar is? Er zijn hier meerdere manieren voor om gebruikers van uw website op opvallende linkjes te laten klikken. Of om de website bezoeker te laten merken dat er een klikbare link op de webpagina staat.

Een van de klassieke trucjes is de tekstkleur op uw pagina veranderen en onderstrepen. Echter zijn er tegenwoordig nog veel meer manieren om de bezoeker duidelijk te maken dat er een link is. Bijvoorbeeld kunt u met het programma CSS hover effecten aan uw tekst of afbeeldingen toevoegen. Met name bij afbeeldingen kunt u de bezoeker hiermee laten weten dat er een link achter bijvoorbeeld een foto zit.

Wat kunnen CSS ontwikkelaars tegenwoordig?

CSS stylisten kunnen tegenwoordig overgangseffecten en animaties toevoegen bij foto,s en knoppen. Het is bijvoorbeeld mogelijk om meer marketingwaarde aan uw website buttons toe te voegen. Met CSS kunt u namelijk een geanimeerde knop maken. Als de webpagina bezoeker met zijn muis op de knop gaat staan komt er een animatie te voorschijn. De animatie kan bijvoorbeeld zijn dat er een glans verschijnt op de knop en dat er een vierkant in lijntjes om de knop heen wordt getrokken. Dit is natuurlijk erg opvallend en de pagina bezoeker zou meer geneigd zijn om op de knop te drukken. Ook kunt u met CSS mooie fade in en fade out effecten toevoegen bij bijvoorbeeld uw foto’s of dia’s op uw webpagina.

De animaties en effecten die u kunt toevoegen met CSS zijn eindeloos!

Als uw web stylist hover CSS gebruikt kunt u hoever effecten toevoegen aan elk element op uw website. Denk hierbij aan knoppen links afbeeldingen en videos. De effecten van hover CSS omvatten 2D overgangen, achtergrond overgangen, randen, schaduw en glans overgangen en nog veel en veel meer.

Voor inspiratie kunt u de volgende CSS termen Googlen voor een mooiere website: Grow, Shrink, Pulse, Pulse glow, Pulse shrink, push, pop, bounce in, bounce out, rotate, grow rotate, float, sink, bob, hang, skew, skew forward, skew backward, wobble horizontal, wobble vertical, wobble to bottom right, wobble top, wobble bottom, wobble skew, buzz, buzz out.

Kant en klaar button effect speciaal voor u!

Om u een beetje te helpen met uw CSS effecten hebben wij een kant en klaar button effect voor u gemaakt. U kunt dit effect op uw pagina gebruiken om meer marketing waarde aan uw buttons toe te voegen!

HTML code:
<!doctypr html
<html>
<head>
<title>Shiny glass button hover effects</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<a href=”#”>




button
</a>
</body>
</html>

CSS code:
body
{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(-30deg, #1ec4e9 0%, #673ab7 50%, #262626 50%, #607d8b 100%);
}
a
{
position: relative;
padding: 25px 30px;
text-decoration: none;
color: #FFF;
font-size: 2em;
text-transform: uppercase;
font-family: sans-serif;
letter-spacing: 4ep;
overflow: hidden;
background: rgba(255,255,255,.1);
box-shadow: 0 5px 5px rgba(0,0,0.2);
}
a:before
{
content: ”;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255,255,255,.1);
}
a:after
{
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear- gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition: 0.5s;
transition-delay: 0.5s;
}
a:hover:after
{
left: 100%;
}
a span
{
position: absolute;
display: block;
transition: 0.5s ease;
}
a span:nth-child(1)
{
top: 0;
left: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(1)
{
width: 100%;
transform: translateX(100%);
}
a span:nth-child(3)
{
bottom: 0;
right: 0;
width: 0;
height: 1px;
background: #fff;
}
a:hover span:nth-child(3)
{
width: 100%;
transform: translateX(-100%)
}
a span:nth-child(2)
{
top: 0;
left: 0;
width: 1;
height: 0px;
background: #fff;
}
a:hover span:nth-child(2)
{
height: 100%;
transform: translateY(100%);
}
a span:nth-child(4)
{
bottom: 0;
right: 0;
width: 1;
height: 0px;
background: #fff;
}
a:hover span:nth-child(4)
{
height: 100%;
}

CSS effecten