Loading

Gradient Border

Gradient Border

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gradient Border</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae mi eget turpis viverra commodo ac nec augue. Morbi nec accumsan turpis, in semper magna. Vivamus lobortis nisl a dui gravida lobortis.</p>
  <span class="gradientContainer">
    <a href="#" class="button gradientBtn">Visit Site</a>
  </span>
</div>
  
  

</body>

</html>
/* Downloaded from https://ahoj.co.uk/ */
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
  margin-top: 20px;
  background-color: rgba(36, 40, 49, 0.2);
}

.container {
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 10px 30px 26px;
  max-width: 350px;
  text-align: center;
  background: linear-gradient(-45deg, #9DAF6E 0%, #109F9A 70%);
}
.container:after {
  content: " ";
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background-color: white;
  z-index: 1;
}

h5, a.button, a.button.gradientBtn {
  font-size: 15px;
  font-weight: 700;
  font-family: 'lato';
  letter-spacing: 1.75px;
  text-transform: uppercase;
  color: #242831;
}

p {
  padding: 0;
  color: #242831;
  font-family: 'lato';
  text-align: left;
}

.truncate {
  position: relative;
  display: block;
  display: -webkit-box;
  height: 96px;
  /* Fallback for non-webkit */
  font-size: 16px;
  line-height: 1.5;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}

a.button {
  display: inline-block;
  margin-bottom: 0;
  padding: 7px 10px 8px;
  text-decoration: none;
  border-radius: 0;
  -webkit-transition: all 150ms ease-out;
  transition: all 150ms ease-out;
}
a.button.gradientBtn {
  margin: 3px;
  padding: 7px 15px;
  color: white;
  text-align: center;
  border: none;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: all 250ms ease-out;
  transition: all 250ms ease-out;
}
a.button.gradientBtn:hover, a.button.gradientBtn:focus {
  color: #242831;
  background-color: rgba(255, 255, 255, 0.5);
}

.gradientContainer {
  position: relative;
  display: inline-block;
  width: auto;
  background: linear-gradient(-45deg, #9DAF6E 0%, #109F9A 70%);
  z-index: 5;
}
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Joe, you can se more from this user in the personal repository

jjcarey
Joe
jjcarey
Rating 3.00 average based on 0 ratings.
0 Downloads
5 Views
3.00 Rating
PREVIEW Open demo in external page
Download File Size: 2.93 KB
Open Original Open on codepen.io