出番多めなボタンたち
基本のスタイルは以下のとおり。
全てのボタンに共通するスタイルは .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ボタン
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クリエイターさま）をお見かけして、いつか自分のサイトに使いたい！と思い備忘録的にボタンコレクションの仲間入りさせておきます。
<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) ;
}他にもいろんなふつくしいボタンも公開されてますし、
クスッっとなるツイートもたくさんありますのでこれからも参考にさせていただきます！