Buton Hover Simple Effect

[abdullahozturk]

Canlı Demo:

PHP Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/onediv/full/jEmjap/ 


HTML Kodları;

PHP Kod: Tümünü Seç Tümünü Kopyala

<button>Hover me !</button> 


CSS Kodları;

PHP Kod: Tümünü Seç Tümünü Kopyala

html,body{
  height:100%;
}
body{
  text-align:center;
}
body:before{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
} 


[Ufufuk]

Güzel bir buton paylaşım için teşekkürler.

[abdullahozturk]

Güzel bir buton paylaşım için teşekkürler.

Önemli değil @ufufuk asıl ben teşekkür ederim.

[Caxing]

Teşekkürler güzele benziyor.

[abdullahozturk]

Teşekkürler güzele benziyor.

Yorum yazmak yerine teşekkürler butonu yeterdi ama :) Önemli değil.

[alfonzo9898]

Nereye Ekliyecez?

[abdullahozturk]

Nereye Ekliyecez?

Global.css ve Şablonlara.

[Blumee]

Hangi şablonlara Global.css tamamda şablonlardan hangisine ekleyeceğiz 1 tane şablon yok

[abdullahozturk]

Hangi şablonlara Global.css tamamda şablonlardan hangisine ekleyeceğiz 1 tane şablon yok

İndex şablonlarından {header} altına.

[Blumee]

Teşekkürler