Css'de ufak bir değişiklik isteği

25-01-2016, 22:52:36

Arkadaşlar buradaki linkteki kodu kullanıyorum üzerine gelince sağa ok çıkıyor. Ben aynısından sola ok istiyorum.

http://www.w3schools.com/css/tryit.a...ttons_animate1

25-01-2016, 23:01:58

#2

MSIL

Merhaba, şunu bir dener misin hocam?

.button span:ago {
content: '«';
position: absolute;
opacity: 0;
top: 0;
left: -20px;
transition: 0.5s;
}

25-01-2016, 23:08:40

#3

Seyum

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '«';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-left: 25px;
}

.button:hover span:after {
  opacity: 1;
  left: 0;
}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

26-01-2016, 13:13:50

#4

McCoy

Seyum adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '«';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-left: 25px;
}

.button:hover span:after {
  opacity: 1;
  left: 0;
}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

Çok saolun hocam oldu nasıl oldu anlamadım ama yaptıklarınızın hepsini yapıyorum bende olmuyor ama sizinkini kopyalayınca tam oturuyor

Sizden ricam bunun linkin rengini beyaz nasıl yaparız birde alt çizgiyi kaldırmak istiyorum.

26-01-2016, 13:23:29

#5

Seyum

McCoy adlı üyeden alıntı: mesajı görüntüle

Çok saolun hocam oldu nasıl oldu anlamadım ama yaptıklarınızın hepsini yapıyorum bende olmuyor ama sizinkini kopyalayınca tam oturuyor

Sizden ricam bunun linkin rengini beyaz nasıl yaparız birde alt çizgiyi kaldırmak istiyorum.

Hocam Linkin rengi zaten beyaz ayrıca altta bir çizği göremedim ekran görüntüsü eklermisiniz.

26-01-2016, 13:28:34

#6

McCoy

Seyum adlı üyeden alıntı: mesajı görüntüle

Hocam Linkin rengi zaten beyaz ayrıca altta bir çizği göremedim ekran görüntüsü eklermisiniz.

Hocam o dediğiniz düz yazı beyaz, link ekleyince mavi oluyor.

26-01-2016, 13:47:44

#7

Seyum

McCoy adlı üyeden alıntı: mesajı görüntüle

Hocam o dediğiniz düz yazı beyaz, link ekleyince mavi oluyor.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '«';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-left: 25px;
}

.button:hover span:after {
  opacity: 1;
  left: 0;
}

.button a {text-decoration:none !important;color:#fff;}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span><a href="*">Hover</a> </span></button>

</body>
</html>

26-01-2016, 13:58:06

#8

McCoy

Seyum adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '«';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-left: 25px;
}

.button:hover span:after {
  opacity: 1;
  left: 0;
}

.button a {text-decoration:none !important;color:#fff;}
</style>
</head>
<body>

<h2>Animated Button</h2>

<button class="button" style="vertical-align:middle"><span><a href="*">Hover</a> </span></button>

</body>
</html>

Hocam bu kodu ekledim altına kodun ama sadece alt çizgi gitti. Link yine mavi kaldı.

.button a {text-decoration:none !important;color:#fff;}

Daha önce bu kodla halletmiştim buna benzer bir butonu. Ama buda çalışmıyor.

.button a{
color:#FFFFFF;
}

26-01-2016, 14:09:26

#9

Seyum

McCoy adlı üyeden alıntı: mesajı görüntüle

Hocam bu kodu ekledim altına kodun ama sadece alt çizgi gitti. Link yine mavi kaldı.

.button a {text-decoration:none !important;color:#fff;}

Daha önce bu kodla halletmiştim buna benzer bir butonu. Ama buda çalışmıyor.

.button a{
color:#FFFFFF;
}

Sitenize Bakılması lazım özelden yazarsanız bakalım