<div class="wrapper"></div>

html,body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// Variables
$color: #c0392b;
$color-dark: #a53125;
$speed: "0.25s";
$transition: all #{$speed} cubic-bezier(0.310, -0.105, 0.430, 1.400);

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main Styles */
.like-btn {
	display: block;
	background-color: $color;
	width: 300px;
	height: 100px;
	line-height: 100px;
	margin: 20px;
	color: #fff;
	position: relative;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	cursor: pointer;
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
	transition: $transition;
	
	span{
		display: block;
		height: 100%;
		text-align: center;
		position: absolute;
		top: 0;
	}
	
	.like-text {
		width: 72%;
		line-height: inherit;
		font-size: 22px;
		text-transform: uppercase;
		left: 0;
		transition: $transition;
		
		&:after {
			content: '';
			background-color: $color-dark;
			width: 2px;
			height: 70%;
			position: absolute;
			top: 15%;
			right: -1px;
		}
	}
	
	.like-icon {
    line-height: inherit;
		width: 28%;
		right: 0;
		transition: $transition;
		font-size: 30px;
		vertical-align: middle;
		transition: $transition, height #{$speed} ease;
		}
	  
  &:hover {
    background-color: darken($color, 5%);
  }
	}

class likeButton {
  render () {
    return `
      <button id="like-btn" class="like-btn">
        <span class="like-text">点赞</span>
        <span class="like-icon">👍</span>
      </button>
    `
  }
}

const wrapper = document.querySelector('.wrapper');
const likeButton1 = new likeButton();
wrapper.innerHTML = likeButton1.render();

const likeButton2 = new likeButton();
wrapper.innerHTML += likeButton2.render();