スライドアニメーションボタン (Shadow DOM 版)

<ce-slidebutton>READ MORE</ce-slidebutton>
<ce-slidebutton data-color="#339">強く押す</ce-slidebutton>
<ce-slidebutton data-color="#393">Information</ce-slidebutton>

<script defer src="./js/ce_slidebutton.js"></script>
		

/**
 * スライドアニメーションボタン
 *
 * '<ce-slidebutton>MORE</ce-slidebutton>'
 * '<ce-slidebutton data-color="#627">MORE</ce-slidebutton>'
 *
 * @author ao-system, Inc.
 * @date 2024-05-25
 */
(() => {
	'use strict';
	class Btn {
		#svg = '<svg xmlns="http://www.w3.org/2000/svg" width="8px" height="12px" viewBox="0 0 8 12"><path d="M0.87,0.8L0.87,0.8c-0.51,0.51-0.51,1.33,0,1.84L4.2,6L0.86,9.35c-0.51,0.51-0.51,1.33,0,1.84l0,0c0.51,0.51,1.34,0.51,1.85,0l4.53-4.53c0.37-0.37,0.37-0.97,0-1.34L2.72,0.8C2.21,0.29,1.38,0.29,0.87,0.8z"/></svg>';
		#style = `
			:host > div {
				--color-fore: #b12;
				--color-back: #fff;
				--color-back-text: #111;
				text-decoration: none;
				background-color: var(--color-back);
				border-radius: 8px;
				width: 200px;
				height: 50px;
				text-align: left;
				display: grid;
				user-select: none;
				cursor: pointer;
				&:hover {
					> div:nth-of-type(2) {
						width: 193px;
					}
					> div:nth-of-type(3) {
						margin-left: 152px;
					}
				}
				> div:nth-of-type(1) {
					grid-area: 1/1/2/2;
					padding-top: 17px;
					padding-left: 70px;
					font-size: 0.9rem;
					line-height: 1;
					font-weight: 600;
					color: var(--color-back-text);
				}
				> div:nth-of-type(2) {
					grid-area: 1/1/2/2;
					box-sizing: border-box;
					background-color: var(--color-fore);
					border-radius: 5px;
					padding-top: 14px;
					padding-left: 15px;
					margin: 3px;
					height: 44px;
					width: 0;
					white-space: nowrap;
					overflow: hidden;
					transition: width 0.2s;
					font-size: 0.9rem;
					line-height: 1;
					font-weight: 600;
					color: var(--color-back);
				}
				> div:nth-of-type(3) {
					grid-area: 1/1/2/2;
					box-sizing: border-box;
					background-color: var(--color-fore);
					border-radius: 5px;
					padding-top: 9px;
					padding-left: 18px;
					margin: 3px;
					width: 43px;
					transition: margin-left 0.2s;
					> svg {
						fill: var(--color-back);
					}
				}
			}
		`;
		constructor() {
		}
		render(elm) {
			const styleElm = document.createElement('style');
			styleElm.innerHTML = this.#style;
			//
			const text = elm.innerText;
			const color = elm.getAttribute('data-color');
			//
			const divElm = document.createElement('div');
			const div1 = document.createElement('div');
			div1.textContent = text;
			divElm.appendChild(div1);
			const div2 = document.createElement('div');
			div2.textContent = text;
			div2.style.backgroundColor = color;
			divElm.appendChild(div2);
			const div3 = document.createElement('div');
			div3.style.backgroundColor = color;
			div3.innerHTML = this.#svg;
			divElm.appendChild(div3);
			//
			const shadowRoot = elm.attachShadow({mode:'closed'});
			shadowRoot.appendChild(styleElm);
			shadowRoot.appendChild(divElm);
		}
	}
	(() => {
		const btn = new Btn();
		customElements.define('ce-slidebutton',
			class extends HTMLElement {
				constructor() {
					super();
					btn.render(this);
				}
			}
		);
	})();
})();