<h1>Gradient Buttons</h1>
<div class="collection collection--list" id="">
<ul class="collection__items">
<li class="rounded collection-item collection-item--has-image" id="">
<div class="collection-item__content">
<div id="content_" class="collection-item-image image">
<a href="">
<img width="" height="" alt="" src="png">
</a>
</div>
<div class="collection-item-label"><a href="">Our products</a></div>
<div class="collection-item-description">
<p>Description</p>
</div>
</div>
</li>
<li class=" square collection-item collection-item--has-image" id="">
<div class="collection-item__content">
<div id="content_" class="collection-item-image image">
<a href="">
<img width="" height="" alt="" src="png">
</a>
</div>
<div class="collection-item-label"><a href="">Our products</a></div>
<div class="collection-item-description">
<p>Description</p>
</div>
</div>
</li>
<li class="solid collection-item collection-item--has-image" id="">
<div class="collection-item__content">
<div id="content_" class="collection-item-image image">
<a href="">
<img width="" height="" alt="" src="png">
</a>
</div>
<div class="collection-item-label"><a href="">Our products</a></div>
<div class="collection-item-description">
<p>Description</p>
</div>
</div>
</li>
<li class="color collection-item collection-item--has-image" id="">
<div class="collection-item__content">
<div id="content_" class="collection-item-image image">
<a href="">
<img width="" height="" alt="" src="png">
</a>
</div>
<div class="collection-item-label"><a href="">Our products</a></div>
<div class="collection-item-description">
<p>Description</p>
</div>
</div>
</li>
</ul>
</div>
$red: crimson !default;
$blue: navy !default;
$purple: purple !default;
$white: #fff !default;
// Gradient
@mixin gradient ($start, $middle, $end, $start-opacity: 0.8, $middle-opacity: 0.5, $end-opacity: 0.8) {
background: $start;
/* Old browsers */
background: linear-gradient(-45deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
/* FF3.6-15 */
background: linear-gradient(-45deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba($start, $start-opacity) 0%, rgba($middle, $middle-opacity) 50%, rgba($middle, $middle-opacity) 51%, rgba($end, $end-opacity) 100%);
}
@mixin gradient-lin ($start, $middle, $end) {
background: $start;
/* Old browsers */
background: linear-gradient(left, $start 0%, $middle 50%, $middle 51%, $end 100%);
/* FF3.6-15 */
background: linear-gradient(left, $start 0%, $middle 50%, $middle 51%, $end 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, $start 0%, $middle 50%, $middle 51%, $end 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
@mixin gradient-img ($start, $middle, $end) {
background-image: linear-gradient(90deg, $start, $middle, $end), linear-gradient(90deg, $start, $middle, $end);
background-size: 100% 2px;
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
}
// Gradient Button styles
@mixin gradient-button ($start, $middle, $end, $width: 205px, $padding: 20px, $font-size: 16px, $border-width: 2px) {
text-transform: uppercase;
font-size: $font-size;
font-weight: normal;
letter-spacing: 2px;
box-sizing: border-box;
border-radius: 50px;
width: $width;
max-width: 100%;
text-align: center;
padding: $padding;
border-left: $border-width solid $start;
border-right: $border-width solid $end;
display: block;
@include gradient-img($start, $middle, $end);
}
body {
background: $white;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 56px;
margin-bottom: 0px;
line-height: 56px;
text-align: center;
padding: 0;
font-family: sans-serif;
background: $red;
padding: 0;
line-height: 1.2;
@include gradient-lin($blue, $purple, $red);
background-clip: text;
text-fill-color: transparent;
color: $blue;
}
ol {
width: 500px;
font-size: 16px;
color: #222;
margin: 0;
li {
margin: 0px 0px 20px 0px;
}
}
.collection {
ul {
list-style: none;
}
li {
margin: 20px 0px;
padding: 0;
}
.collection-item-description,
.collection-item-image {
display: none;
}
.collection-item-label {
text-transform: uppercase;
letter-spacing: 1px;
a {
text-decoration: none;
padding: 25px 40px;
font-size: 18px;
display: block;
line-height: 1;
}
}
}
.rounded {
.collection-item-label {
a {
@include gradient-button ($red, $purple, $blue);
&:hover {
@include gradient-lin($blue, $purple, $red);
color: $white;
}
}
}
}
.square {
.collection-item-label {
a {
@include gradient-button ($red, $purple, $blue);
border-radius: 0px;
&:hover {
@include gradient-lin($blue, $purple, $red);
color: $white;
}
}
}
}
.solid {
.collection-item-label {
a {
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(90deg, salmon, salmon), linear-gradient(90deg, $red, $blue);
color: $white;
font-size: 16px;
font-weight: normal;
letter-spacing: 2px;
box-sizing: border-box;
width: 205px;
max-width: 100%;
border-radius: 50px;
text-align: center;
padding: 20px;
&:hover {
@include gradient-lin($blue, $purple, $red);
color: $white;
}
}
}
}
.color {
.collection-item-label {
a {
@include gradient-lin($blue, $purple, $red);
color: $white;
font-size: 16px;
font-weight: normal;
letter-spacing: 2px;
box-sizing: border-box;
width: 205px;
max-width: 100%;
border-radius: 50px;
text-align: center;
padding: 20px;
&:hover {
@include gradient-lin($red, $purple, $blue);
color: $white;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.