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.

Selim Hamzaoğulları
Sakarya üniversitesi Bilgisayar Mühendisliği Bölümü mezunuyum.Lise yıllarımdan bu yana yazılımla özellikle Web tarafında Front-end ile uğraşıyorum.
Yorum Yaz

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

Yukarı Git