ボタンいろいろ

2020年8月9日2023年9月27日

CSS html コピペ

CSS

Yasuko

yasuko

旅行に行きたいなぁ

出番多めなボタンたち

基本のスタイルは以下のとおり。

全てのボタンに共通するスタイルは .btn としてスタイリング。

なので、アイコン等をつけないのであればこのスタイルだけでOK！

ボタン

<a href="" class="btn">ボタン</a>

.btn {
  background: #abd300;
  background-size: 200% 100%;
  background-image: -webkit-linear-gradient(left, transparent 50%, #d1e02a 50%);
  background-image: linear-gradient(to right, transparent 50%, #d1e02a 50%);
  -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
  transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
  box-shadow: 0px 0px 15px 0px rgba(94, 94, 94, 0.05);
  color: #fff;
  display: block;
  text-align: center;
  padding: 14px;
  margin: 40px 0;
  max-width: 300px;
  position: relative;
}
a.btn {
  text-decoration: none;
}
a.btn:hover {
  color: #fff;
}
.btn:hover {
  background: #d1e02a;
  background-position: -100% 100%;
}
.btn:nth-of-type(odd):hover {
  background: #d1e02a;
  background-position: 100% -100%;
}

ホバーしたときに色が変わるようにしている

.btn:hover
.btn:nth-of-type(odd):hover

はホバー時の変化が必要ない時にはなくてもOK！

ちなみに、右からキランor左からキランの違いなので、

どちらかだけ使ってももちろんOK！

疑似クラス nth-of-typeについては以前記事にしました。こちら。

通常ボタン

cssでくの字やじるしを作るパターン

通常ボタン

<a href="" class="btn arrow">通常ボタン</a>

.btn.arrow::after {
  content: "";
  height: 7px;
  width: 7px;
  position: absolute;
  top: calc(50% - 3.5px);
  right: 20px;
  margin: auto;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

リンクボタン

FontAwesomeアイコンを使うパターン

リンクボタン

<a href="" class="btn ext">リンクボタン</a>

.btn.ext:after {
  content: "\f08e";
  font-family: "FontAwesome";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

PDFボタン

<a href="" class="btn pdf">PDFボタン</a>


.btn.pdf:after {
  content: "\f1c1";
  font-family: "FontAwesome";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

メールボタン

<a href="" class="btn mail">メールボタン</a>


.btn.mail:before {
  content: "\f0e0";
  font-family: "FontAwesome";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

エクセルボタン

<a href="" class="btn excel">エクセルボタン</a>


.btn.excel:after {
  content: "\f1c3";
  font-family: "FontAwesome";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

ワードボタン

<a href="" class="btn word">ワードボタン</a>

.btn.word:after {
  content: "\f1c2";
  font-family: "FontAwesome";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  right: 20px;
}

ボタンで登場回数が多いものをコピペできるように。

ガラスのボタン

twitterを見ていたらものすごい素敵なボタンを作っておられる方（あしざわ – Webクリエイターさま）をお見かけして、いつか自分のサイトに使いたい！と思い備忘録的にボタンコレクションの仲間入りさせておきます。

ENTRY

<a href="#" class="button">
  <div class="button__wrapper"></div>
  <div class="button__box">ENTRY</div>
</a>
<a href="#" class="button button--round">
  <div class="button__wrapper"></div>
  <div class="button__box">ENTRY</div>
</a>

.button{
    display: block ;
    position : relative ;
    width : 240px ;
    height : 60px ;
    background: rgb(153,191,187);
    background: radial-gradient( rgba(93,108,107,.3) 0%, rgba(95,162,158,0) 90%);
    box-shadow : 0 0 24px rgba(116,132,145,1) ;
    transition : all .7s ease ;
}
.button::before{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    top : -4px ;
    left : 0 ;
    width : 160px ;
    height : 10px ;
    border-radius : 50% ;
    background: rgb(170,255,240);
    background: radial-gradient( rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 100%);
}
.button::after{
    content : '' ;
    position : absolute ;
    z-index : 2 ;
    bottom : -4px ;
    right : 0 ;
    width : 160px ;
    height : 10px ;
    border-radius : 50% ;
    background: rgb(170,255,240);
    background: radial-gradient( rgba(255,255,255,1) 0%, rgba(255,255,255,0) 33%, rgba(255,255,255,0) 100%);
}
.button__wrapper{
    width : 100% ;
    height :100% ;
    clip-path: polygon(0% 0%, 0 100%, 0.7% 100%, 0.7% 3%, 99.3% 3%, 99.3% 98%, 0% 98%, 0% 100%, 100% 100%, 100% 0%);
    background-color:hsla(0,0%,100%,1);
    background-image:
    radial-gradient(at 0% 0%, hsla(180,100%,98%,1) 0px, transparent 50%),
    radial-gradient(at 29% 0%, hsla(189,100%,78%,1) 0px, transparent 50%),
    radial-gradient(at 0% 48%, hsla(355,0%,100%,1) 0px, transparent 50%),
    radial-gradient(at 100% 62%, hsla(340,0%,100%,1) 0px, transparent 50%),
    radial-gradient(at 90% 98%, hsla(169,88%,83%,1) 0px, transparent 50%),
    radial-gradient(at 26% 100%, hsla(240,0%,44%,1) 0px, transparent 50%),
    radial-gradient(at 79% 0%, hsla(336,0%,51%,1) 0px, transparent 50%);
}
.button__box{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : absolute ;
    z-index : 1 ;
    top : 3% ;
    left : 0.8% ;
    width : 98.4% ;
    height : 94% ;
    color : rgba(255,255,255,.7) ;
    letter-spacing : 2px ;
    background: rgb(255,255,255);
    background: linear-gradient(120deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 50%);
    transition : all 1s ease ;
}
.button__box::before{
    content : '' ;
    position : absolute ;
    z-index : -1 ;
    top : 0 ;
    left : 0 ;
    width : 100% ;
    height : 100% ;
    background : linear-gradient( 120deg , rgba(255,255,255,.4),rgba(255,255,255,0)) ;
    clip-path : path('M215.98,12.57c8.09,0,16.1,.12,24.02,.33V0H0V44.89C53.01,25.06,130.12,12.57,215.98,12.57Z');
}
.button--round{
    border-radius : 30px ;
}
.button--round .button__wrapper{
    clip-path: path('M210,1c15.99,0,29,13.01,29,29s-13.01,29-29,29H30C14.01,59,1,45.99,1,30S14.01,1,30,1H210m0-1H30C13.43,0,0,13.43,0,30s13.43,30,30,30H210c16.57,0,30-13.43,30-30S226.57,0,210,0h0Z');
}
.button--round .button__box{
    border-radius : 30px ;
    overflow : hidden ;
}
.button:hover{
    box-shadow : 0 0 24px rgba(116,132,145,0) ;
}
.button:hover .button__box{
    letter-spacing : 8px ;
    color : rgba(255,255,255,1) ;
}

あしざわ – Webクリエイターさま

他にもいろんなふつくしいボタンも公開されてますし、

クスッっとなるツイートもたくさんありますのでこれからも参考にさせていただきます！