skip to Main Content

Hyperlink

Et hyperlink har fire stadier, og rækkefølgen vist herunder er vigtig:

  1. link: a
  2. Besøgt link: a:visited
  3. Mouse-over på link: a:hover
  4. Klik på link: a:active

HTML

<a href="#">Her er et link</a>

CSS

a{ 
 color: crimson;
 text-decoration: underline; 
 font-weight: 600;
 }
 
/*a:visited {
 color: green;
 } */ 
 
a:hover{ 
 color: limegreen;
 text-decoration: none; 
 }
 
a:active {
 color: black;
 font-weight: 900;
 font-size: 80%;
 }

HOVER EKSEMPLER

HTML

HTML/ fanen Tekst:

<div class="eks-font-size eksempel"><a href="#">font-size</a></div>

HTML

HTML/ fanen Tekst:

<div class="eks-color eksempel"><a href="#">color</a></div>

HTML

HTML/ fanen Tekst:

<div class="eks-border eksempel"><a href="#">border</a></div>

 

HTML

HTML/ fanen Tekst:

<div class="eks-background-color eksempel"><a href="#">background-color</a></div>

 

HTML

HTML/ fanen Tekst:

<div class="eks-backg-img eksempel"><a href="#">background-image</a></div>

 

 

HTML

HTML/ fanen Tekst:

<div class="eks-width eksempel"><a href="#">width</a></div>

 

 

HTML

HTML/ fanen Tekst:

<div class="eks-border-radius eksempel"><a href="#">border-radius</a></div>

 

 

HTML

HTML/ fanen Tekst:

<div class="eks-box-shadow eksempel"><a href="#">box-shadow</a></div>

 

 

 

HTML

HTML/ fanen Tekst:

<div class=" eksempel eks-font-size eks-color eks-border eks-background-color eks-backg-img eks-width eks-border-radius eks-box-shadow "><a href="#">Hele molevitten</a></div>

 

 

 

 

CSS

.eksempel a{
 display: block;
 text-decoration: none;
 background-color: crimson;
 color: white;
 height: 60px;
 line-height: 60px;
 text-align: center;
}


.eks-border a:hover{
 border: 3px dotted black;
}
.eks-font-size a:hover{
 font-size: 30px;
}

.eks-background-color a:hover{
 background-color: yellow;
}
.eks-color a:hover{
 color: black !important;
}
.eks-width a:hover{
 width: 80%;
}
.eks-border-radius a:hover{
 border-radius: 20px;
}
.eks-backg-img a:hover{ 
 background-image: url('http://webitricerne.dk/wp/wp-content/uploads/2014/03/baggrundsbillede-lille-orange.png');
}
.eks-box-shadow a:hover{ 
 box-shadow: -5px -5px 5px grey;
}





TRANSITIONS

Gør overgang mellem a og a:hover "smooth".

Shorthand-kode:

transition: [1 transition-property] [2 transition-duration] [3 transition-timing-function] [4 transition-delay];

  1. transition-property: Fx font-size, background-color, color, border, box-shadow eller all.
  2. transition-duration: 1s = et sekund | 0.5s = et halvt sekund.
  3. transition-timing-function: Fx linear | ease | ease-in | ease-ou t| ease-in-out.
  4. transition-delay: Forsinkelse i sekunder. 1s = et sekund | 0.5s = et halvt sekund.

Ved brug af transitions kan det være nødvendigt at fortælle de enkelte browsere hvordan de skal håndtere transitions.

          
 -moz-transition: all .5s ease-in-out;      /* Firefox */
 -webkit-transition: all .5s ease-in-out;   /* Safari & Chrome */
 -o-transition: all .5s ease-in-out;        /* Opera */
 -ms-transition: all .5s ease-in-out;       /* IE */
 transition: all .5s ease-in-out;           /* Standard */

Der er temmelig uigennemskueligt hvornår prefixes er nødvendige.
Når du er i tvivl: Kast et blik på værktøjerne shouldiprefix.com, caniuse.com og prøv: Autoprefixer - fjerner unødvendige/ tilføjer nødvendige "vendor prefixes".

HTML

HTML/ fanen Tekst:

<div class="transition-eksempel trans-eks-font-size"><a href="#">font-size</a></div>

 

HTML

HTML/ fanen Tekst:

<div class="eks-color eksempel"><a href="#">color</a></div>

HTML

HTML/ fanen Tekst:

<div class="eks-border eksempel"><a href="#">border</a></div>

 

CSS

.transition-eksempel a{
 display: block;
 text-decoration: none;
 color: white;
 background-color: crimson;
 height: 60px;
 line-height: 60px;
 text-align: center;
 border: 1px solid crimson;
 font-size: 1.3em;
 margin: 0 auto;
 -webkit-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
 }
 
 .trans-eks-font-size a:hover{
 font-size: 30px;
 }
 
 .trans-eks-bgcolor a:hover{
 background-color: black;
 }
 .trans-eks-opacity a:hover{
 opacity: 0.6;
 }


o

ikon_mobil

Knap med billede

HTML

<a class="rundknap" href="#"><img class="alignnone wp-image-5307 size-full" src="http://webitricerne.dk/wp/wp-content/uploads/2016/04/ikon_mobil.png" alt="ikon_mobil" width="27" height="42" /></a>

CSS

.rundknap {
 display: block;
 background-color: black;
 color: white;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 margin: 0px auto 0.8em;
 font-size: 2em;
 text-decoration: none;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex; /* Opera 12.1, Firefox 20+ */
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-transition: background-color 0.5s ease;
 transition: background-color 0.5s ease;
 }
.rundknap:hover{
 background-color: limegreen;
 color: white;
}

Simpel knap

HTML

<div class="knap" style="text-align: center;"><a href="#">En knap</a></div>

CSS

.knap a{
 border: 1px solid crimson;
 background-color: crimson;
 display: inline-block;
 padding: 5px 10px;
 min-width: 150px;
 margin: 0px auto;
 border-radius: 4px;
 font-size: 1.2em;
 color: white ;
 text-transform: uppercase;
 text-decoration: none;
 text-align: center;
 -webkit-transition: all .5s ease-in-out;
 transition: all .5s ease-in-out;
}

.knap a:hover{
 background-color: limegreen;
}

o

Back To Top
Search