Transition des Background Images in CSS?

.btn{
    border-color: rgb(0, 153, 255);
    border-style:solid;
    color: black;
    align-content: center;
      flex-direction: column;
      margin: 20px;
      padding-right: 5em;
      padding-left: 5em;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      border-radius: 20px;  font-family: "Roboto", sans-serif; 
      text-align:center;
    text-decoration: none;
    cursor: pointer; 
    float: left;
    transition: 0.5s;
    overflow: hidden;
}

.btn:hover{
    transition: 0.5s;
    background-image:-webkit-linear-gradient( top left, rgba(0, 153, 255, 0.5), rgba(6, 125, 204, 0.5));
    color: white;
}

Comments

[MagstDuKaffee]

Was ist die Frage?

[FrageCoding]

Ich mach ich, dass das Background-image auch eine Transition hat.

Answer 1

[medmonk]

1. Ein Teil deiner CSS Eigenschaften ergeben keinen Sinn
2. Ein weiterer Teil lässt sich kürzer zusammenfassen
3. Die Schreibweise deines Verlaufs ins falsch
4. Verläufe und Transition können nicht ohne weiteres kombiniert werden
5. Verwende z.B. ein Pseudo-Element mit Opacity als Workaround
6. Beschäftige dich alternativ mit der @property Regel

CSS:

.btn {
  padding: 0.1rem 5rem;
  margin: 1.25rem;
  position: relative;
  
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  color: black;
  border: solid rgb(0, 153, 255);
  border-radius: 1.25rem;
}

.btn:hover {
  color: white;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(to left top, rgba(0, 153, 255, 0.5) 0%, rgba(6, 125, 204, 0.5) 100%);
  border-radius: 1.25rem;
  transition: opacity 0.5s ease-in-out;
}

btn:hover::before {
  opacity: 1;
}

LG medmonk

Comments

[FrageCoding]

Der Hintergrund der Buttons hat immer noch keine Transition.

[FrageCoding]

@FrageCoding

Mein Fehler, Cache.. Danke dir.

[medmonk]

@FrageCoding

Kein Ding, gern geschehen.

LG und frohes neues, medmonk.

Answer 2

[tanteerna68]

Das wird so nicht funktionieren. In :hover gehört das Transition nicht, sondern in die Klasse für den Button. In der Klasse für den Button fehlt aber die Eingangssituation. Es soll ja etwas passieren. Folglich brauchst Du eine Startsituation und eine Endsituation, damit der Browser auch weiß was er machen soll.

Answer 3

[elmex7]

Das ist so ein Thema....

Hier eine Diskussion mit Workarounds und aktuellen Updaes dazu:

https://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds