;

Tutorial CSS Link - Memperindah tampilan link html dengan css

CSS Link - mengubah tampilan link dengan CSS


buayaberdiri.blogspot.com - Dalam CSS kita juga kita bisa memperindah tampilan link yang digunakan untuk berpindah pada halaman lain yang tuju.kita dapat memperindah tautan link tersebut dengan menggunakan tombol pada css ataupun mengubah warna pada area tampilan pada link.

Contoh dibawah ini contoh link biasa tanpa css,hanya menggunakan html biasa.

<html>
 <head>
  <title>https://buayaberdiri.blogspot.co.id/</title>
 </head>
 <body>
  <a href="https://buayaberdiri.blogspot.com/">Touch ME</a>
 </body>
</html>





Memperindah Link Menggunakan CSS


pada contoh diatas itu hanya link dengan html biasa,kamu bisa memperindah tampilan link menggunakan HTML+CSS,perhatikan gambar dibawah ini :


<html>
 <head>
  <title>https://buayaberdiri.blogspot.co.id/</title>
  <style>
  
   a{
    background-color:red;
    color:yellow;
    border:solid;
    padding:30px 30px 30px 30px;
    margin:50px 50px 50px 50px;
   }
  </style>
 </head>
 <body>
  <a href="https://buayaberdiri.blogspot.com/">Touch ME</a>
 </body>
</html>



memperindah link dengan CSS



Mengubah tampilan link menggunakan button CSS


<html>
 <head>
  <title>https://buayaberdiri.blogspot.co.id/</title>
  <style>
  
   .a{
    background-color:red;
    color:yellow;
    border:solid;
    padding:15px;
    margin:50px 50px 50px 50px;
   }
  </style>
 </head>
 <body>
 <button a href="https://buayaberdiri.blogspot.com/" class="a">Touch ME</button>
 </body>
</html>

Tampilan tombol link akan seperti ini :


Cara memperindah tombol link menggunakan button CSS



Atau kamu bisa memperindah dengan cara menggunakan warna gradasi atau warna transparan pada CSS :


<html>
 <head>
  <title>https://buayaberdiri.blogspot.co.id/</title>
  <style>
  
   .a{
    backgroundlinear-gradient(#e66465#9198e5);
    color:black ;
    border:solid;
    padding:15px;
    margin:50px 50px 50px 50px;
   }
  </style>
 </head>
 <body>
 <button a href="https://buayaberdiri.blogspot.com/" class="a">Touch ME</button>
 </body>
</html>

Tampilan tombol link dengan gradasi warna akan seperti ini :


Cara membuat tombol link di html + CSS



Memperindah Tombol Link Menggunakan Border Radius Pada CSS:

Pada contoh dibawah ini kita bisa memberikan radius pada kotak atau button,sehingga akan memberikan tampilan yang bagus dan menarik.Berikut ini adalah sintaks CSS+HTML untuk membuat tombol link menggunakan border radius dari CSS:


<html>
 <head>
  <title>https://buayaberdiri.blogspot.co.id/</title>
  <style>
  
   .a{
    backgroundlinear-gradient(#e66465#9198e5);
    color:black ;
    border:solid;
    border-radius:5px;
    padding:15px;
    margin:50px 50px 50px 50px;
   }
  </style>
 </head>
 <body>
 <button a href="https://buayaberdiri.blogspot.com/" class="a">Touch ME</button>
 </body>
</html>

Maka hasilnya akan seperti ini :


Memperindah Tombol Link dengan Border Radius



Penutup


Demikian informasi tentang bagaimana cara memperindah tampilan tombol link yang bisa kamu pelajari atau kamu gunakan untuk aplikasi atau website yang ingin kamu bangun.

Demikian informasi tentang Tutorial CSS Link bisa membantu kamu,Gbu :)

coba artikel ini : TUTORIAL CSS - PADDING


List of Article Posts https://buayaberdiri.blogspot.com