Transition on background gradients

In this example below you will see how to do a Transition on background gradients with some HTML / CSS and Javascript

Normaly css transitions on backgrounds are not possible. With this simple sollution it is!

Thumbnail
This awesome code was written by jboeijenga, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jboeijenga ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Transition on background gradients</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <h1>Transition on background gradients</h1>
  <a href="" data-title="Hover me!">Hover me!</a>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jboeijenga/transition-on-background-gradients-MYBjpY */
@import url(https://fonts.googleapis.com/css?family=Lato:700);
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: #fff;
  padding-top: 40px;
  background: #041122;
}

.container {
  margin: 0 auto;
  max-width: 520px;
  min-width: 320px;
  text-align: center;
}

a {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 15px 30px 15px;
  margin-top: 20px;
  overflow: hidden;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI5YTA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI1OTA3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: linear-gradient(#29a080, #259073);
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
a:after {
  position: absolute;
  content: attr(data-title);
  padding: 15px 30px 15px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  border-radius: 0.25em;
  transition: opacity 0.8s;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IyNWY3NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FiNTI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: linear-gradient(#b25f76, #ab526b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
a:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

Comments