Merhabalar bu gün html elemanları ele alarak ve css ile düzenleme yaparak basit güzen ve animasyonlu bir görünüm elde eltmek istedim ve bunu da sizinle paylaşmak istiyorum.
Kodlar İndir.
index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <link rel="stylesheet" href="effect-main.css" /> <title>Efekler</title> </head> <body> <center> <br /><br /> <table align="center"> <tr> <td width="200" align="center" valign="middle" class="textkutu"> <input type="text" class="inputtext inputtext1" placeholder="Adınız" title="Adınız"/> </td> <td width="200" align="center" valign="middle" class="textkutu"> <input type="text" class="inputtext inputtext2" placeholder="Adınız" title="Adınız"/> </td > <td align="center" valign="middle"> <input type="text" class="inputtext inputtext3" placeholder="Adınız" title="Adınız"/> </td> <tr> <td width="200" align="center" valign="middle" class="textkutu"> <img src="img\home-icon.png" class="ikonlar" width="100" alt="Anasayfa İkon" /> </td> <td align="center" valign="middle"> <img src="img\email-icon.png" class="ikonlar" width="100" alt="E-posta İkon" /> </td> <td align="center" valign="middle"> <img src="img\phone-icon.png" class="ikonlar" width="100" alt="Telefon İkon" /> </td> </tr> <tr> <td align="center" valign="middle"> <input type="button" class="butonlar1 buton1" value="Gönder" title="Gönder" /> </td> <td align="center" valign="middle"> <input type="button" class="butonlar1 buton2" value="Gönder" title="Gönder" /> </td> <td align="center" valign="middle"> <input type="button" class="butonlar1 buton3" value="Gönder" title="Gönder" /> </td> </tr> <tr> <td align="center" valign="middle"> <input type="button" class="butonlar2 buton4" value="Gönder" title="Gönder" /> </td> <td align="center" valign="middle"> <input type="button" class="butonlar2 buton5" value="Gönder" title="Gönder" /> </td> <td align="center" valign="middle"> <input type="button" class="butonlar2 buton6" value="Gönder" title="Gönder" /> </td> </tr> </table> </center> </body> </html>
effect-main.css*{padding:0;margin:0;transition:all 0.5s;}:focus{outline: none;} .ikonlar{transition:all 0.7s;margin-top:50px;cursor:pointer;} .ikonlar:hover{background:#505050;border-radius:20px; cursor:pointer;} .inputtext1{color:#FF0000;border:1px solid #FF0000;}.inputtext2{border:1px solid #00FF00;color:#00FF00;}.inputtext3{color:#0000FF;border:1px solid #0000FF;} .inputtext1::placeholder{color:#FF0000;}.inputtext2::placeholder{color:#00FF00;}.inputtext3::placeholder{color:#0000FF;} .inputtext { padding:2px; outline: none; background-color:transparent; transition:all 0.5s; width:200px; height:20px; font-size:15px; transition:all 0.5s; border: 0; padding: 10px 0; border: 1px solid #FFF; border-bottom:1px solid #ccc; }.inputtext:focus{font-size:20px;} .inputtext1:focus{border-bottom:1px solid #f00;border-right:1px solid #f00;border-top:1px solid #f00;} .inputtext2:focus{border-bottom: 1px solid #0f0;} .inputtext3:focus{border:1px solid #00F;} .butonlar1{border:none;margin-top:50px;color:#FFF; background-color:transparent; transition:all 0.7s;width:100px;height:40px;cursor:pointer;} .buton1{background-color:#F00;}.buton1:hover{border-radius:10px;background-color:#FFF;color:#F00;border:2px solid #F00;} .buton2{background-color:#0F0;}.buton2:hover{border-radius:10px;background-color:#FFF;color:#0F0;border:2px solid #0F0;} .buton3{background-color:#00F;}.buton3:hover{border-radius:10px;background-color:#FFF;color:#00F;border:2px solid #00F;} .butolar1:hover{font-size:50px;}.butolar2:hover{font-size:50px;} .butonlar2{border-radius: 5px; border:none;margin-top:50px;color:#FFF;transition:all 0.5s;width:100px;height:40px;cursor:pointer;} .buton4{background-color:#F00;}.buton4:hover{border-radius:10px;background-color:#FFF;color:#F00;border-bottom:3px solid #F00;} .buton5{background-color:#0F0;}.buton5:hover{border-radius:10px;background-color:#FFF;color:#0F0;border-bottom:3px solid #0F0;} .buton6{background-color:#00F;}.buton6:hover{border-radius:10px;background-color:#FFF;color:#00F;border-bottom:3px solid #00F;}