cssでオシャレなボタンや吹き出しを作るTips

:root {
  --main: #0b0e2e;
  --sub: #a5a55e;
  --acc:  #d1d1d1; 
  --size: 10px;
}

color: var(–main) と書くとcolor: #0b0e2eと同じになります。

ボタン

コードを見る

<button id="button-pt1">Button</button>

button {
  width: calc(var(--size) * 10);
  height: calc(var(--size) * 4);
  border-radius: calc(var(--size) / 2);
}
#button-pt1 {
  background-color: var(--main);
  margin: 0.5em;
  border: 1px var(--sub) dashed;
  box-shadow: 0 0 0 0.4em var(--main);
  color: var(--acc);
}

コードを見る

<button id="button-pt1">Button</button>

#button-pt2 {
  margin: 0.4em;
  height: calc(var(--size) * 4.4);
  border: calc(var(--size)/2) solid transparent;
  border-image:
    repeating-linear-gradient(-45deg, var(--sub), var(--sub) calc(var(--size) / 2), transparent 0, transparent var(--size))
    5;
}

吹き出し

This is a Baloon

コードを見る

<div id="baloon-pt1">This is a Baloon</div>

#baloon-pt1 {
  border: calc(var(--size)/2) solid var(--main);
  border-radius: calc(var(--size) / 4);
  padding: calc(var(--size)/2) var(--size);
  margin: calc(var(--size)/2) var(--size);
}
#baloon-pt1::after {
  content: '';
  display: block;
  position: absolute;
  height: var(--size);
  width: 0.1rem;
  border: var(--size) solid transparent;
  border-top: var(--size) solid var(--main);
  margin-top: var(--size);
}

This is second Baloon

コードを見る

<div id="baloon-pt2">This is second Baloon</div>

#pt2 {
  border: calc(var(--size)/2) solid transparent;
  margin: calc(var(--size)/2) var(--size);
  padding: calc(var(--size)/2) var(--size);
  border-image:
    repeating-linear-gradient(-45deg, var(--sub), var(--sub) calc(var(--size) / 2), transparent 0, transparent var(--size)) 5;
}
#pt2::after {
  content: '';
  display: block;
  position: absolute;
  height: var(--size);
  width: 0.1rem;
  border: var(--size) solid transparent;
  border-top: var(--size) solid var(--sub);
  margin-top: var(--size);
}

Posted in

design