<div class="container">
  <h2>Ghost Button</h2>
  <button class="btn btn--ghost">
    <span class="btn-text btn-text--gradient">Ghost</span>
  <h2>Filled Button</h2>
  <button class="btn btn--filled">
    <span class="btn-text">Filled</span>
// Making the Pen kinda, sorta pretty
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 400;
h1 {
  text-align: center;
.container {
  text-align: center;
  margin: 4rem 0;

// $dir = Direction of gradient
// $from = Starting color
// $to = Ending color
// $width = Border width/thickness

@mixin border-gradient($dir, $from, $to, $width) {
  border-left: $width solid $from;
  border-right: $width solid $to;
    // Needed for both the top and bottom borders
    -webkit-linear-gradient($dir, $from, $to),
    -webkit-linear-gradient($dir, $from, $to);
  background-size: 100% $width;
  background-position: 0 100%, 0 0;
  background-repeat: no-repeat;
  background-clip: border-box;

@mixin background-gradient($dir, $from, $to) {
    -webkit-linear-gradient($dir, $from, $to),

@mixin text-gradient($dir, $from, $to) {
  background: -webkit-linear-gradient($dir, $from, $to);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

// Colors
$c-primary: #5b3c70;
$c-secondary: #e57b5d;
$c-white: #fff;

// Using the thing
.btn {
  background: transparent;
  padding: .75rem 1.5rem;
  margin: 1rem;
  border: none;
  &--ghost {
    @include border-gradient(left, $c-primary, $c-secondary, 3px);
  &--filled {
    @include background-gradient(left, $c-primary, $c-secondary);
  &-text {
    text-transform: uppercase;
    color: $c-white;
    &--gradient {
      font-weight: 500;
      @include text-gradient(left, $c-primary, $c-secondary);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.