LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Customize Your Button

Preview Your Button

Copy Your Code

Optional: add this to your CSS if you'd like a full-width button on smaller screens:
CSS
body {
  background-color: #f1f1f1;
}

.wrapper {
  display: flex;
  font-family: Lato, sans-serif;
}
.wrapper h1 {
  color: #3d3d3d;
  font-family: Lato, sans-serif;
  line-height: 1.3em;
  text-align: center;
  font-size: 24px;
}
.wrapper .mobile-button {
  color: #3d3d3d;
  font-family: lato, sans-serif;
  line-height: 1.3em;
  margin: 10px;
  font-size: 14px;
}
.wrapper .flex-col {
  padding: 10px 20px;
}

.controls {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 33%;
}
.controls .control-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 5px 2px;
}
.controls input, .controls select, .controls label {
  color: #3d3d3d;
  font-family: Lato, sans-serif;
  font-size: 16px;
  padding: 5px;
}

.results-container {
  width: 33%;
}

.html-container {
  width: 33%;
}
.html-container textarea {
  color: #3d3d3d;
  display: block;
  font-family: Lato, sans-serif;
  font-size: 16px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 90%;
}

@media (max-width: 700px) {
  h1 {
    text-align: left !important;
  }

  .wrapper {
    flex-flow: row wrap;
    width: 100%;
    padding: 0;
  }

  .flex-col {
    flex: 100%;
  }
}
JS
class ButtonGen {
  constructor(config) {
    const
      defaults = config || new Map([
        ['color', 'white'],
        ['border-radius', '5'],
        ['font', 'Helvetica, Arial, sans-serif'],
        ['font-size', '16'],
        ['font-weight', 'normal'],
        ['line-height', '15'],
        ['alignment', 'center'],
        ['text', 'Click Here'],
        ['buttonwidth', '120'],
        ['targetname', '_blank'],
        ['href', '#'],
        ['background-color', '#2b3138']
      ]);
    
    this.fields = [];
    this.initSpectrum();
    this.loadDefaults(defaults);
    this.bindEvents();
    this.generate();
  }

  spectrumConfigGen(color) {
    return {
      color,
      showInput: true,
      preferredFormat: 'hex',
      change: () => { this.generate(); }
    };
  }

  initSpectrum(spectrumInputs = ['color', 'background-color']) {
    this.spectrumTargets = [];
    spectrumInputs.forEach((id) => {
      this.spectrumTargets.push(id);
      $('#' + id).spectrum(this.spectrumConfigGen('black'));
    });
  }

  loadDefaults(config) {
    for (const [key, value] of config.entries()) {
      const target = $('#' + key);
      target.on('change', () => { this.generate(); })
      this.fields.push(target);
      if (this.spectrumTargets.includes(key)) {
        target.spectrum('set', value);
      } else {
        target.val(value);
      }
    }
  }

  generate() {
    let results = {};
    this.fields.forEach(($field) => {
      results[$field.attr('id')] = $field.val();
    });
    
    const output = `
${results.text}
` $('.button-container').html(output); $('.html-output').val(output); } bindEvents() { $('#generate').on('click', () => { this.generate(); }); } } new ButtonGen();

Description

HTML Email Button Generator A PEN BY Kim Connell
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv