Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
  <div class="cont_wrapper">
    <div class="btns_wrapper">
      <button @click="messages_count++" class="add_message_btn">+ Add new message</button>
      <button @click="messages_count = 0">Clear Messages</button>
    </div>
    <h3>Ripple effect when new message is received</h3>
    <div class="options_wrapper">
      <div class="animation_option">
        <input id="messagesBadge" type="checkbox" v-model="badgeFeedback">
        <label for="messagesBadge">Badge</label>
      </div>
      <div class="animation_option">
        <input id="buttonBg" type="checkbox" v-model="buttonFeedback">
        <label for="buttonBg">Button</label>
      </div>
    </div>

    <div class="chat_btn" @click="messages_count=0">
      <div v-if="glowingCircle && buttonFeedback" class="glowing_circle"></div>
      <div v-if="messages_count > 0" ref="msgsBdg" class="messages_badge pulsing_border">
        <div v-if="glowingCircle && badgeFeedback" class="glowing_circle pink_glowing_circle"></div>
        {{messages_count}}
      </div>
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.52829 0.116857C3.70986 0.721486 0.658871 3.8379 0.0984191 7.66286C-0.186307 9.60274 0.161419 11.4363 0.951778 13.0121C1.12769 13.3614 1.15714 13.7623 1.00987 14.1256C0.639235 15.0419 0.307872 16.0025 0.0288739 17.0096C-0.00958047 17.1389 -0.00958047 17.2919 0.0288739 17.4204C0.124601 17.7722 0.433872 17.9996 0.770961 17.9996C0.83887 17.9996 0.908415 17.9915 0.977142 17.971C1.98514 17.6928 2.94404 17.3606 3.86367 16.9876C4.22858 16.8395 4.63112 16.8689 4.98294 17.0448C6.55711 17.8368 8.39229 18.1862 10.333 17.9023C14.1596 17.3435 17.2777 14.2925 17.8831 10.4716C18.8527 4.35253 13.6474 -0.852677 7.52829 0.116857Z" fill="white" />
      </svg>
    </div>
  </div>
</div>
              
            
!

CSS

              
                html {
  box-sizing: border-box;
  font-size: 62.5%; /* reseting base font-size to 10px */
  font-family: "SF Pro Rounded";
  color: rgba(255, 255, 255, 1);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #0a080c;
}

.cont_wrapper {
  width: 100%;
  /*     background: rgba(255,255,255,0.1); */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  flex-direction: column;
}

.cont_wrapper h3 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}

.btns_wrapper {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}

.btns_wrapper button {
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  padding: 12px 24px;
  margin-right: 16px;
  transition: all ease-in-out 0.16s;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}
.btns_wrapper button:focus {
  outline: none;
}
.btns_wrapper button:last-child {
  margin-right: 0;
}
.btns_wrapper button:hover {
  background: rgba(255, 255, 255, 0.16);
}
.btns_wrapper button:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.96);
}

.chat_btn {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.chat_btn,
.chat_btn svg,
.messages_badge {
  transition: all ease-in-out 0.16s;
}

.chat_btn:hover {
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

/* .chat_btn:hover svg {
  transform: scale(1.15);
} */

.chat_btn:hover .messages_badge {
  /*   top: -6px; */
}

.messages_badge {
  background: #ff2959;
  color: white;
  font-family: "SF Pro Rounded";
  font-size: 11px;
  border-radius: 100px;
  padding: 1px 4px;
  text-align: center;
  position: absolute;
  top: -4px;
  /*   right: -4px; */
  left: calc(100% - 12px);
  /*   box-shadow: 0 0 0 2px #0a080c; */
  border: 2px solid #0a080c;
  pointer-events: none;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  z-index: 2;
  animation: appearIn 0.12s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.chat_btn:active {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
/* .chat_btn:active svg {
  transform: scale(1);
} */

.pulsing_border {
  animation: pulse 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

/* Animation */
@keyframes appearIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px rgba(255, 41, 89, 0.6);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(255, 41, 89, 0);
  }
}

@keyframes white_glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }
}
@keyframes pink_glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 41, 89, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(255, 41, 89, 0);
  }
}

.glowing_circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 200px;
  /*   box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1); */
  animation: white_glow 0.6s ease-out;
}

.pink_glowing_circle {
  animation: pink_glow 0.6s ease-out;
}

.options_wrapper {
  margin-bottom: 40px;
  font-size: 14px;
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  padding: 24px;
}
.animation_option {
  display: flex;
  align-items: center;
}
.animation_option:first-child {
  margin-right: 24px;
}

.animation_option input {
  margin-right: 8px;
}

.animation_option label {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.animation_option label:hover {
  color: rgba(255, 255, 255, 1);
}

              
            
!

JS

              
                new Vue({
  el: "#app",
  data() {
    return {
      messages_count: 0,
      glowingCircle: false,
      badgeFeedback: false,
      buttonFeedback: false
    };
  },
  computed: {},
  mounted() {},
  watch: {
    messages_count: function () {
      if (!this.glowingCircle) {
        this.glowingCircle = true;
        setTimeout(() => {
          this.glowingCircle = false;
        }, 500);
      }
    }
  },
  methods: {}
});

              
            
!
999px

Console