Fontawesome İle Buton Yapımı / Creative Button Design - HTML5 - CSS3 - Fontawesome - Ders30
Evet arkadaşlar bu video uygulamamızda ilk başta bir arkaplan resimini uyguladık ve üzerine html, css, fontawesome kullanarak hover efekti ile scale ile nasıl bir efekt oluşturabileceğimizi gördük. Videodan öğrendiklerinizi geliştirmek size kalmış bizimki basit örnekler olabilir, sizlerin anlayabilmesi için. Bu uygulama ile transition, scale ve hover efektlerini öğrenebilirsiniz. Videolarımızdan günlük haberdar olmak için kanalımıza abone olmayı unutmayın. Abone sayısı arttıkça verilen hizmetin kalitesi ve çeşitliliğide artacaktır.
HTML İÇERİĞİ:
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<a href="#"><span></span>Web Sitem<span><i class="fa fa-youtube" aria-hidden="true"></i></span></a>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
font-family: calibri;
background: url(hayvanlar/ayı.jpg);
background-size: cover;
overflow: hidden;
}
a{
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%,-50%);
padding: 10px 25px 10px 20px;
border: 3px solid white;
border-radius: 5px;
text-decoration: none;
transition: 0.5s;
color: firebrick;
background: #ddd;
z-index: 1;
}
a span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a span:nth-child(1):before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: firebrick;
z-index: -1;
transform: scale(0);
transition: 0.5s;
}
a:hover{
color: white;
}
a:hover span:nth-child(1):before{
transform: scale(1);
}
a span:nth-child(2){
position: absolute;
top: 18%;
right: -13%;
display: block;
border: 2px solid white;
border-radius: 5px;
padding: 2px 5px;
background-color: #ddd;
z-index: 1;
color: black;
}
a span:nth-child(2):before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
transform: scale(0);
transition: 0.5s;
z-index: -1;
}
a:hover span:nth-child(2):before{
transform: scale(1);
}
a:hover span:nth-child(2){
color: firebrick;
}
Yorumlar
Yorum Gönder