CSS ile Nesneye Dinamik Border Verme

CSS ile Nesneye Dinamik Border Verme

Bu örnek uygulamamda CSS ile butonun veya yazıın üzerine gelince dinamik olarak border vermeyi göstereceğim.

İlk olarak HTML kodlarımızı ekleyerek başlayalım 

<div style="text-align:center">
<a href="#" class="soldan-ciz">Soldan Çiz</a>
<a href="#" class="ortadan-ciz">Ortadan Çiz</a>
<a href="#" class="sagdan-ciz">Sağdan Çiz</a>
</div>

Daha Sonra Css Kodlarımıza Geçelim 

body {
  margin: 25px auto;
}
a {
  padding:20px;
  color:black;
  text-decoration:none;
}

/* Soldan Çiz */

.soldan-ciz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.soldan-ciz:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.soldan-ciz:hover:before, .soldan-ciz:focus:before, .soldan-ciz:active:before {
  right: 0;
}

/* Ortadan Çiz */

.ortadan-ciz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.ortadan-ciz:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.ortadan-ciz:hover:before, .ortadan-ciz:focus:before, .ortadan-ciz:active:before {
  left: 0;
  right: 0;
}

/* Sağdan Çiz */

.sagdan-ciz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.sagdan-ciz:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 100%;
  right: 0;
  bottom: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sagdan-ciz:hover:before, .sagdan-ciz:focus:before, .sagdan-ciz:active:before {
  left: 0;
}

Bu kadar.

Üç farklı örnek var.Css te örnekleri ayırdım.

Beğendinizi alıp kullanabilirisin.

Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git