アール・デコの美しい幾何学模様をデザインに取り入れた、CSSで実装されたボタン -Art Déco Buttons
Post on:2026年10月6日
sponsorsr
アール・デコのモダンでおしゃれなデザインが好きな人は多いと思います。
アール・デコの左右対称の美しい幾何学模様をデザインに取り入れた、CSSで実装されたボタンを紹介します。
アール・デコとは、パリで開催された「アール・デコラティフ（Arts décoratifs）」という展覧会が由来とされており、1910～30年代にかけてヨーロッパやアメリカを中心に世界中で大流行したモダンデザイン様式です。
アール・デコの大きな特徴は直線や三角形・四角形・円をシンメトリーの左右対称に配置した幾何学模様で、モダンでおしゃれな印象を与えています。現代でもアール・デコのエレガントな雰囲気は再評価されています。
そんなアール・デコのおしゃれなデザインにインスパイアされ、CSSで実装されたボタンはこちら。各ボタンには、ホバーやクリックのエフェクトも備わっています。
下記は、CSSで実装されたボタンです（画像ではありません！）
HTMLはシンプルで、button要素にclassを付与するだけです。
|
1 2 3 4 5 |
<button class="btn-deco style-1">Art Deco I</button> <button class="btn-deco style-2">Art Deco II</button> <button class="btn-deco style-3">Art Deco III</button> <button class="btn-deco style-4">Art Deco IV</button> <button class="btn-deco style-5">Art Deco V</button> |
CSSは、共通で使用する.btn-decoとそれぞれのボタン用に.style-1で構成されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.btn-deco { background: transparent; border: none; color: #000000; padding: 14px 24px; font-family: 'Arial Black', 'Impact', 'Franklin Gothic Heavy', sans-serif; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; position: relative; cursor: pointer; transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1); outline: none; z-index: 2; background-clip: padding-box; width: 100%; text-align: center; margin: 30px 0; } .btn-deco::before, .btn-deco::after { pointer-events: none; } /* STYLE 1 */ .style-1::before { content: ''; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; border-left: 2px solid #000; border-right: 2px solid #000; transition: all 0.32s ease-out; } .style-1::after { content: ''; position: absolute; top: 0; bottom: 0; left: -6px; right: -6px; border-top: 2px solid #000; border-bottom: 2px solid #000; transition: all 0.32s ease-out; } .style-1:hover { background-color: #000; color: #fff; letter-spacing: 4px; transform: scale(0.98); } .style-1:hover::before { top: 0; bottom: 0; border-left-color: #fff; border-right-color: #fff; } .style-1:hover::after { left: 0; right: 0; border-top-color: #fff; border-bottom-color: #fff; } |
他のCSSは、下記のデモページをご覧ください。
See the Pen
CSSで実装された美しいアール・デコのボタン by coliss (@coliss)
on CodePen.
sponsors
