In this Aptana Studio 3 Turkish Tutorial, I will show you make a horizontal rotating button animation with CSS. I will add to the use of new codes and button animations are often used in the internet world.
Aptana Studio 3 programın da üzerine geldiğimizde yatay olarak dönen güzel bir buton animasyonu yapmayı CSS kodları ile göstereceğim. Dikey den farklı kodları ve teknikleri kullanmaya çalışarak yeni bilgiler gösterceğim.
Farklı renk kodları bulmayı ve yine farklı şekilde fontları stil dosyasına eklemeyi Aptana studio 3 programında basitleştirerek göstereceğim. Hadi videomuza geçelim.
Kaynak index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Horizontal Button</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="merkez">
<div class="yatay1">
<a href="#">HOME</a>
</div>
<div class="yatay2">
<a href="#">ABOUT</a>
</div>
<div class="yatay3">
<a href="#">CONTACT</a>
</div>
</div>
</body>
</html>
Kaynak stil.css
*{
background: url(purple.jpg);
margin: 0;
padding: 0;
}
.merkez{
width: 600px;
margin: 50px auto;
}
.yatay1, .yatay2, .yatay3{
float: left;
display: inline-block;
width: 160px;
height: 36px;
margin-bottom: 30px;
margin-right: 2px;
}
.yatay1 a{
background:#CC0066;
border: 2px solid #CC0033;
}
.yatay1 a:hover{
background: #66FF33;
border-bottom: #66FF00 solid #0066FF;
transition: all 2s;
transform: rotateY(360deg);
}
.yatay2 a{
background:#CC0066;
border: 2px solid #CC0033;
}
.yatay2 a:hover{
background: #66FF33;
border-bottom: #66FF00 solid #0066FF;
transition: all 2s;
transform: rotateY(360deg);
}
.yatay3 a{
background:#CC0066;
border: 2px solid #CC0033;
}
.yatay3 a:hover{
background: #66FF33;
border-bottom: #66FF00 solid #0066FF;
transition: all 2s;
transform: rotateY(360deg);
}
a{
font-family: 'Roboto', sans-serif;
display: block;
padding: 12px 35px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
Bir sonraki aşamada görüşmek üzere…
Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3
Posted on Utopian.io - Rewarding Open Source Contributors
Very useful, you can folow me for hardware and tecnhology posts
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thanks and done...
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Emeğinize sağlık :)
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Teşekkür ederim
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by tarikhakan55 from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP. Be sure to leave at least 50SP undelegated on your account.
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Thank you for return
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit
Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit