HORIZONTAL ROTATING BUTTON ANIMATION IN CSS

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.

Source

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

HORIZONTAL ROTATING BUTTON ANIMATION IN CSS – Aptana Studio 3 Turkish Tutorial