Buaya Terbang Blog

Friday, June 1, 2018

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>

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>

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{
    background: linear-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 :

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{
    background: linear-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