Przycisk w CSS

Question

Mam taki przycisk:
https://jsfiddle.net/g1buqfve/5/

Pytanie: co zrobić, żeby po najechaniu myszką :hover wykonało się przejście, ale po wykonaniu powrócił wygląd przycisku sprzed hover, pomimo że kursor dalej będzie nad przyciskiem?

Comments

, żeby po najechaniu myszką :hover wykonało się przejście, ale po wykonaniu powrócił wygląd przycisku sprzed hover

a nie wraca? 

---

No nie wraca. Wraca dopiero po odjechaniu kursorem znad przycisku.

Answer 1

Można skorzystać z animacji css.

 

body
{
  background-color:#1a1a1a;
}

.button
{
	border-radius:7px;
	width:63px;
	height:63px;
	margin:5px;
	padding:0;
	font-size:40px;
	text-align:center;
	cursor:pointer;
  
  color:#F00000;
  background-color:#1a1a1a;
  border:1px solid #ffffff;
}

.button:hover {
  animation: effect 0.2s ease-in 2 alternate;
}

@keyframes effect {
  from {
    color:#F00000;
    background-color:#1a1a1a;
    border:1px solid #ffffff;
    transform: scale(1);
  }
  to {
    border: 1px solid rgba(255,255,255,0);
    color: rgba(26,26,26,0);
    background-color: rgba(0,0,0,0);
    transform: scale(1.5);
  }
}

 

Comments

Nie działa tak jak powinno,przycisk się powiększa, potem zmniejsza z animacją do oryginalnych rozmiarów, a chodzi o to, żeby border  i cyfra w divie powiększyły sie 1.5 raza znikając całkowicie i po animacji widać było pierwotny widok.

---

Aby uzyskać efekt:

początek --animacja--> koniec --bez animacji--> początek

zmień właściwość animation selektora button:hover na 

animation: effect 0.2s ease-in;

 

Później w @keyframes ustaw sobie początkowe i końcowe właściwości sam już.

---

Dzięki, prawie o to chodziło :)