Designer Points: Menükódok

Sziasztok! :) Most (teljes egészében) saját kódolású menükódokat hoztam!^^
Rengeteget dolgoztam velük, tehát örülnék ha hagynátok kommentet (ha viszitek, akkor mindenképpen!)

Link1

Link2

Link3

<style type="text/css">

a.vattacukor{
    width: 100px;
    height: 20px;
padding-left: 30px;
padding-right: 30px;
    background: pink;
text-align: center;
text-decoration: none;
text-color:black;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
  transition-property: top, left, border-radius, background-color, border;

}

a.vattacukor:hover {
    background: purple;
text-align: center;
border-left: 20px solid;
border-right: 20px solid;
border-color: black;

}

a.vattacukor,a.vattacukor:hover,a.vattacukor:visited{
text-decoration: none;
color:black;
}

</style>

<br />

<div class="apuka">
<a class="vattacukor" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link1</a>
</div>
<div class="apuka">
<a class="vattacukor" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link2</a>
</div>
<div class="apuka">
<a class="vattacukor" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link3</a>
</div>

Link1

Link2

Link3

a.levelibéka{
    width: 100px;
    height: 20px;
padding-left: 30px;
padding-right: 30px;
 border-left: 0px solid;
 border-right: 20px solid;

border-color: #d24b66;

background: #F37735;
-webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;
  transition-property: top, left, border-radius, background-color, border-color, border;
border-radius: 10px;
}

a.levelibéka:hover{
border-left: 10px solid;
border-right: 0px;
border-color: #d24b66;

border-radius: 0px;

}

a.levelibéka,a.levelibéka:hover,a.levelibéka:visited{
text-decoration: none;
color:black;
}

</style>

<br />

<div class="hugocska">
<a class="levelibéka" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link1</a>
</div>
<div class="hugocska">
<a class="levelibéka" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link2</a>
</div>
<div class="hugocska">
<a class="levelibéka" href="http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1">Link3</a>
</div>

2015. május 8., péntek

Menükódok

Nincsenek megjegyzések:

Megjegyzés küldése