1. Ayyıldız Tim forumu Hariç Hiç Bir şekilde Rütbeli Oldugunu İdda edenlere inanmayınız.. Ayyıldız Tim Adına Sizden Bilgi Belge TC Kimlik Vb Evrak İsteyenlere Asla Bilgilerinizi Vermeyiniz.
    Duyuruyu Kapat

Html & Css İle Animasyonlu Buton

'Html - CSS - XML - JavaScript - Ajax' forumunda BYRKTR tarafından 17 Mart 2019 tarihinde açılan konu

  1. BYRKTR Guest

    • Guest
    Katılım:
    12 Kasım 2016
    Mesaj:
    61
    Alınan Beğeniler:
    64

    Özel Mesaj
    Devrelerim Komutanlarım herkese merhaba,

    Bu konumda sizlere geneli css ile oluşan basit animasyonlu buton (üzerine gelince değişen buton) yapacağım.

    Öncelikle HTML kodlarımızı yazalım..

    Kod:
    <html>
    <head>
        <title>Animatin Buttons</title>
    </head>
    <body>
    
    <button>Animasyonlu Buton</button>
    
    </body>
    </html>
    Bu kısımda genel html kodlarımızı yazdık ve bir de buton oluşturduk.

    Şimdi CSS kısmını yazıyoruz.

    Kod:
    <html>
    <head>
        <title>Animatin Buttons</title>
    </head>
    <body>
    
    <button>Animasyonlu Buton</button>
    
    <style>
    .buton {
    color: red;
    background-color: black;
    border-radius: 10px;
    border: solid;
    }
    .buton:hover {
    color: black;
    background-color: cyan;
    border-radius: 25px;
    border: solid;
    }
    </style>
    
    </body>
    </html>
    Son olarak butonumuza CSS ile yazdığımız sınıfı ekliyoruz.

    Kod:
    <button class="buton">Animasyonlu Buton</button>
    Burada yaptığımız şey şudur;

    Butonun üzerine gelmeden CSS kısmındaki .buton alanındaki özellikler çalışacak. Üstüne geldiğimizde .buton:hover kısmındaki özellikler çalışacak.


    ÇIKTISI:


    [​IMG] [​IMG]

     

Bu Sayfayı Paylaş