CodePen Embed - SVG Feedback Buttons

<div class="container">
  <h1>SVG Feedback Buttons</h1>
  <p class="hint"><strong>Hint:</strong> Typing "Wall Street" into the street address box to get an alternative address. Leaving the street address empty will result in invalid and anything else will be validated.</p>
  <p class="hint">Demonstration buttons are below the form.</p>
  <form>
    <input id="address_street" class="validation-input" type="text" placeholder="Street address e.g. 101 Wall Street" />
    <input id="address_locale" class="validation-input" type="text" placeholder="Locale e.g. New York" />
    <input id="address_region" class="validation-input" type="text" placeholder="Region e.g. NY" />
    <input id="address_postcode" class="validation-input" type="text" placeholder="Postcode e.g. 10005" />
    <input id="address_country" class="validation-input" type="text" placeholder="Country e.g. United states" />

    <button type="button" id="validate">
      <div class="new-content">
        <span>Validating</span>
      </div>
      <div class="content">

          <span>Validate</span>
      
      </div>
    </button>
    
    <div id="invalid-address">
      <i class="closeAddr">Close</i>
      <p>We could not validate this address but have found these alternatives:</p>
      <div id="result">
        <ul id="multi-alternative-address">
          <ul>
            <label>Select <input type="radio" name="alt-addr"></label>
            <li>1 WALL ST</li>
            <li>NEW YORK</li>
            <li>NY</li>
            <li>10005-3509</li>
            <li>UNITED STATES</li>
          </ul>
          <ul>
            <label>Select <input type="radio" name="alt-addr"></label>
            <li>10 WALL ST</li>
            <li>NEW YORK</li>
            <li>NY</li>
            <li>10005-3509</li>
            <li>UNITED STATES</li>
          </ul>
          <ul>
            <label>Select <input type="radio" name="alt-addr"></label>
            <li>100 WALL ST</li>
            <li>NEW YORK</li>
            <li>NY</li>
            <li>10005-3509</li>
            <li>UNITED STATES</li>
          </ul>
          <ul>
            <label>Select <input type="radio" name="alt-addr"></label>
            <li>101 WALL ST</li>
            <li>NEW YORK</li>
            <li>NY</li>
            <li>10005-3509</li>
            <li>UNITED STATES</li>
          </ul>
        </ul>
      </div>
      
      <button type="button" id="update_addr">
        <div class="content">
          <span>Update address</span>
        </div>
      </button>
    </div>
  </form>

  <button type="button" id="positive">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
        <path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke="white" stroke-width="3"/>
      </svg>
      <span>Positive</span>
    </div>
  </button>
  <button type="button" id="negative">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
        <path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/>
        <path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/>
      </svg>
      <span>Negative</span>
    </div>
  </button>

  <button type="button" id="warning">
    <div class="content">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet">
        <polygon class="triangle"
                 stroke="white"
                 stroke-width="2"
                 fill="none"
                 points="15,4 0,34 30,34"
                 />
        <path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" fill="none" />
        <path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" fill="none" />
      </svg>
      <span>Warning</span>
    </div>
  </button>
</div>

$blue: #428BCA;
$bright-blue: #0099CC;
$green: #5caf8e;
$red: #e6484d;
$yellow: #fede62;
$grey: #e0e0e0;
$dark-grey: #666666;
$white: #ffffff;

/* Page setup */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica', 'Tahoma', sans-serif;
  color: $dark-grey;
}

input, button {
   &:active, &:focus {
    outline: 0;
    box-shadow: 0 0 5px 0 $bright-blue;
  }
}

h1 {
  font-size: 2em;
  font-weight: 200;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid lighten($dark-grey, 40%);
  margin: 20px 0;
}

.hint {
  font-size: .8em;
  font-style: italic;
  line-height: 135%;
  margin-bottom: 20px;
  strong {
    font-weight: 400;
  }
}

h1, p, ul, label {
  letter-spacing: .5px;
  font-weight: 200;
}

.container {
  width: 400px;
  margin: 0 auto;
}


input[type="text"] {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0 auto 10px;
  border: 1px solid $grey;
  border-radius: 3px;
  
  transition: border-color .25s ease;
  &:active, &:focus {
    border-color: $bright-blue;
  }
}

button {
  -webkit-appearance: none;
  display: block;
  cursor: pointer;
  position: relative;
  
  background-color: $blue;
  color: $white;
  text-transform: uppercase;
  overflow: hidden;
  
  padding: 0;
  height: 35px;
  width: 200px;
  margin: 12px auto;
  border: none;
  border-radius: 3px;
  
  transition: all .25s ease;
  
  &:hover {
    background-color: darken($blue, 5%);
  }
  
  div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: transform .5s ease;
    
    span, svg {
      transition: all .5s ease;
    }
  }
  
  &#validate {
    div {
      &.content, &.new-content {
       transform: translate3d(0,-100%,0);
      }
    }
    &.validating {
      div.content, div.new-content {
        transform: translate3d(0,0,0);
      }
    }
  }
  
  &.success, &.valid {
    background-color: $green;
    color: $white;
    &:hover {
      background-color: darken($green, 5%);
      border-color: darken($green, 5%);
    }
  }
  
  &.invalid {
    background-color: $red;
    color: $white;
    &:hover {
      background-color: darken($red, 5%);
      border-color: darken($red, 5%);
    }
  }
  
  &.warning {
    background-color: $yellow;
    color: $dark-grey;
    &:hover {
      background-color: darken($yellow, 5%);
    }
    svg path, svg polygon {
      stroke: $dark-grey;
    }
    
    .viewAddr {
      position: absolute;
      right: 0;
      top: 0;
      
      background-color: darken($yellow, 15%);
      
      height: 100%;
      width: 0;
      margin-right: 0;
      border-radius: 0 3px 3px 0;
      
      transition: background-color .3s ease;
      animation: slideWidth .3s .5s forwards;
      
      &:hover {
        background-color: darken($yellow, 20%);
      }
      svg {
        height: 35px;
        width: 100%;
        margin-right: 0;
        .moreArw {
          stroke-dasharray: 30;
          stroke-dashoffset: 30;
          animation: stroke .3s cubic-bezier(.65, 0, .45, 1) 1s forwards;
        }
      }
    }
  }
  
    svg {
      margin-right: 5px;
      
      /*  SVGs  */
      .check {
        stroke-dasharray: 36;
        stroke-dashoffset: 36;
        animation: stroke .3s cubic-bezier(.65, 0, .45, 1) 0.5s forwards;
      }
      .cross-1 {
        stroke-dasharray:36;
        stroke-dashoffset: -36;
        animation: stroke .3s cubic-bezier(.65, 0, .45, 1) 0.2s forwards;
      }

      .cross-2 {
        stroke-dasharray:36;
        stroke-dashoffset: -36;
        animation: stroke .4s cubic-bezier(.65, 0, .45, 1) 0.2s forwards;
      }

      .triangle {
        stroke-dasharray: 98;
        stroke-dashoffset: 98;
        -webkit-animation: stroke .4s cubic-bezier(.65, 0, .45, 1) 1s forwards;
        animation: stroke .4s cubic-bezier(.65, 0, .45, 1) 1s forwards;
      }

      .exclaim-1 {
        stroke: #666666;
        stroke-dasharray:38;
        stroke-dashoffset: -36;
        animation: stroke .4s cubic-bezier(.65, 0, .45, 1) 0.5s forwards;
      }
  
      .exclaim-2 {
        stroke: #666666;
        stroke-dasharray:12;
        stroke-dashoffset: -12;
        animation: stroke .4s cubic-bezier(.65, 0, .45, 1) 0.5s forwards;
      }
    }
    /*  End SVGs  */  
  
  &.valid, &.invalid {
    svg path {
      stroke: $white;
    }
  }
  
  i {
    margin-right: 5px;
  }
}

form {
  position: relative;
  background-color: lighten($dark-grey, 55%);
  padding: 20px;
  width: 100%;
  border: 1px solid lighten($dark-grey, 40%);
  margin:0 auto;
  border-radius: 4px;
  box-shadow: 0 0 2px 0 lighten($dark-grey, 50%);
  
  > button {
    width: 100%;
    margin-bottom: 0;
  }
}

#invalid-address {
  display: none;
  position: absolute;
  left: 385px;
  bottom: 17px;
  
  font-family: helvetica;
  background-color: $white;
  color: #4e4e4e;

  height: 280px;
  width: 300px;
  margin: 15px auto 0;
  border: 1px solid $grey;
  box-shadow: 0 0 3px 1px #ececec;
  
  .closeAddr {
    position: absolute;
    top: 5px;
    right: 5px;
    display: block;
    
    cursor: pointer;
  }
  
  p {
    margin: 10px;
    line-height: 125%;
    font-size: .75em;
  }
}
#multi-alternative-address {
  border-top: 1px solid #cccccc;
  box-shadow: inset 0 -12px 8px -11px #696868;
  overflow: scroll;
  max-height: 150px;

  ul {
    font-size: .75em;
    border-bottom: 1px solid #cccccc;
    padding: 5px 10px 3px;
    position: relative;
    width: 100%;
    label {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 10px;
    }
    li {
      line-height: 140%;
    }
  }
  
  //  Triangle connector for outside of this panel
  &:after, &:before {
    display: block;
    content: '';
    position: absolute;
  }
  &:after {
    border-bottom: 7px solid transparent;
    border-top: 7px solid transparent;
    border-right: 9px solid $white;
    bottom: 12px;
    left: -9px;
  }
  &:before {
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid;
    border-right-color: $grey;
    bottom: 9px;
    left: -10px;
  }
}

/* For demo buttons */
#positive, #negative, #warning {
  svg {
    width: 0;
    path {
      display: none; 
    }
  }
}

#warning polygon {
  display: none;
}

/* Animations */
@-webkit-keyframes stroke {
  100% {
    -webkit-stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes slideWidth {
  100% {
    width: 35px;
  }
}

@keyframes slideWidth {
  100% {
    width: 35px;
  }
}

View Compiled

$('#validate .content').on('click', function(){
  $('#validate').removeClass('valid, invalid').addClass('validating');
  if($(this).next('.viewAddr').length > 0) {
    $(this).next('.viewAddr').remove();
  }
  setTimeout(function(){
    if($('input#address_street').val() == "") {
      var isValid = 'invalid';
    }

    else if($('input#address_street').val() == "Wall Street" || $('input#address_street').val() == "w") {
      var isValid = 'warning';
    }

    else {
      var isValid = 'valid';
    }

    var $this = $('#validate');
    validate($this, isValid);
  }, 1000);

  //  Set a one-time watcher to check when an input in the form is touched
  $('.validation-input').one('input change', function(){
      $('#validate')
          .removeClass('valid invalid warning')
          .removeAttr('disabled')
          .addClass('validate')
          .find('.content')
              .find('svg').width(0).parent()
              .find('span').text('Validate');

      $('#invalid-address').hide();
  });

});


function validate($this, isValid) {
  var addedClass = '',
    svg = '',
    text = '';

  $this.find('svg').remove();

  switch(isValid) {
    case 'valid': 
        addedClass = 'valid';
        svg = '<svg xmlns="http://www.w3.org/2000/svg" height="27" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet"><path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke-width="3"/></svg>';
        text = 'Valid';
      break;

    case 'invalid':
        addedClass = 'invalid';
        svg = '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet"><path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/><path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/></svg>';
        text = 'Invalid';
      break;

    case 'warning':
        addedClass = 'warning';
        svg = '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet"><polygon class="triangle" stroke-width="2" fill="none" points="15,4 0,34 30,34" /><path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" fill="none" /><path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" fill="none" /></svg>';
        text = 'Warning';
        $('#invalid-address').show();
      break;
  }

  $this
    .find('.content')
    .prepend(svg);
  $this
    .find('.content span')
    .text(text);
    if(isValid == 'warning') {
      $this.find('.content').after('<span class="viewAddr"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet"><path class="moreArw" fill="none" d="M5 10 L15 21 L5 30" stroke-width="3"/></svg></span>');
    
    $('.viewAddr').on('click', function(){
      $('#invalid-address').toggle();
    });
  }
  $this
    .removeClass('validating')
    .addClass(addedClass);
  return;
}

$('#update_addr').click(function(e){
  e.preventDefault();
  var $this = $('#validate'),
      svg = '<svg xmlns="http://www.w3.org/2000/svg" height="27" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet"><path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke-width="3"/></svg>',
      text = 'Valid',
      addedClass = 'valid';

  $this
    .find('svg')
    .remove();
  $this
    .find('.viewAddr')
    .remove();
  $this
    .find('.content')
    .prepend(svg);
  $this
    .find('.content span')
    .text(text);
  $this
    .removeClass('warning')
    .addClass(addedClass);

  var selected = $(this).siblings('#result').find('ul#multi-alternative-address input:checked').parents('ul').children('li');

  for(var i = 0; i < selected.length; i++) {
    $('form input').eq(i).val(selected.eq(i).text());
  }

  $('#invalid-address').hide();
});

$('.closeAddr').on('click', function(){
  $('#invalid-address').hide();
});


//  Sample buttons
$('#positive').on('click', function() {
  $(this).addClass('valid');
  $(this).find('svg').width(25);
  $(this).find('path').show();

  if($('#positive').hasClass('success')) {
    $('input').one('input', function(){
        $('#positive').removeClass('success');
    });
  }
});

$('#negative').on('click', function(){
  $(this).addClass('invalid');
  $(this).find('svg').width(25);
  $(this).find('path').show();
});

$('#warning').on('click', function(){
  $(this).addClass('warning');
  $(this).find('svg').width(25);
  $(this).find('path').show();
  $(this).find('polygon').show();
});

This Pen is owned by Jonno Witts on CodePen.

See more by @jonnowitts on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js