Movatterモバイル変換

[0]ホーム
URL:

コリス

これは便利で簡単！ モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

サイト構築 -CSS

Post on:2022年5月25日

sponsorsr

Webサイトやスマホアプリで使用される、モダンCSSで実装された100種類のさまざまなアニメーションのボタンを紹介します。

角丸や矩形ベースのボタンに、背景がスライドしたり、分割したり、プルプルしたり、ボーダーがきらっとしたり、文字がくるっとしたり、変形したり、ネオンに輝いたり、ボタンの実装に困った時にチェックすると便利です。

モダンCSSで実装された100種類のさまざまなアニメーションのボタン -100 Modern CSS Buttons

100 Modern CSS Buttons
100 Modern CSS Buttons -GitHub

100 Modern CSS Buttonsは、モダンCSSで実装されたボタン100種類のコレクションです。角丸や矩形ベースのボタンにさまざまなCSSアニメーションが使用されています。

ライセンスはGPL-3.0 licenseで、商用プロジェクトでも無料で利用できます。制作者様によると、個人的なプロジェクトであろうと商用プロジェクトであろうと、オープンソースであろうとクローズドソースであろうと、好きなように使用できます、とのことです。帰属は必要ありません。

サイトのキャプチャ

100 Modern CSS Buttons

ボタンは、シンプルなHTMLとCSSで実装されています。JavaScriptはなしです。右上のコピーボタンをクリックすると、簡単にコピペできます。

サイトのキャプチャ

Basic -100 Modern CSS Buttons

CSSアニメーションはシンプルなものから、ちょっと変わったものまで、いろいろ揃っています。

サイトのキャプチャ

Over Fold　-100 Modern CSS Buttons

たとえば、上記のボタンは「Over Fold」と呼ばれるものです。
ホバーまたはクリックすると、右下から左上にコーナーを移動して、背景が表示されるボタンです。下記のようにclip-pathをアニメーションさせています。

See the Pen
CSS Button, explained. by Eluda (@eludadev)
onCodePen.

HTMLは、下記の通りです。

HTML
1
2
3
4
5
<buttonclass="btn-31">
  <spanclass="text-container">
    <spanclass="text">Button</span>
  </span>
</button>

CSSはアニメーションが少し複雑なので、コードは長めです。

CSS
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
.btn-31{
  display:block;
  box-sizing:border-box;
  padding:20px45px;
 
  position:relative;
 
  text-transform:uppercase;
  border:1pxsolidcurrentColor;
}
 
.btn-31:before{
  content:"";
  z-index:-1;
 
  position:absolute;
  inset:0;
 
  --progress:100%;
 
  background:white;
  clip-path:polygon(
    100%0,
    var(--progress)var(--progress),
    0100%,
    100%100%
  );
  transition:clip-path0.2s;
}
.btn-31:hover:before{
  --progress:0%;
}
 
.btn-31.text-container{
  display:block;
  position:relative;
  overflow:hidden;
}
.btn-31.text{
  display:block;
  position:relative;
  font-weight:900;
  mix-blend-mode:difference;
}
.btn-31:hover.text{
  animation:move-up-alternate0.3sforwards;
  will-change:transform;
}
 
@keyframesmove-up-alternate{
  from{
    transform:translateY(0%);
  }
  50%{
    transform:translateY(80%);
  }
  51%{
    transform:translateY(-80%);
  }
  100%{
    transform:translateY(0%);
  }
}

sponsors

Related Posts

関連記事が見つかりませんでした。

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp