Logical Properties Demo

index.html

<button dir="ltr" class="button" type="button">
  <svg viewBox="0 0 24 24">
    <path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
  </svg>
  <span>A nice button</span>
</button>

logical-properties-demo.markdown

Logical Properties Demo

A Pen by Andy Bell on CodePen.

License.

script.js

const button = document.querySelector("button");

button.addEventListener("click", evt => {
  if (button.getAttribute("dir") === "ltr") {
    button.setAttribute("dir", "rtl");
  } else {
    button.setAttribute("dir", "ltr");
  }
});

style.css

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2rem;
  color: #ffffff;
  background: hsl(338, 81%, 41%);
  border: none;
  font-family: Courier New, monospace;
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: 0.03ch;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover:focus {
  outline: none;
}

.button svg {
  margin-inline-end: 0.5em;
  width: 1.4em;
  height: 1.4em;
  fill: currentcolor;
  transform: translateY(-1px); /* Optical adjustment */
}

body {
  display: grid;
  place-items: center;
  background: hsl(39, 100%, 97%);
  color: hsl(222, 30%, 16%);
}

styles

<link href="https://unpkg.com/modern-css-reset/dist/reset.min.css" rel="stylesheet" />