CSSでボタンをデザインしてみる

サイトにオリジナリティーな機能性を

 

WordPressでサイトを運営していくにあたって、ボタンやブログカードなど様々な要素にオリジナリティーを入れていきたいのは皆が共通した考えかなと思います。

サイトのデザインなんて意識しない、気にならないって人もいるかな。

でも、こういった細かい要素のデザインひとつひとつを丁寧に作りこんでいくことによってサイト全体に統一性を持たせることは、読み手にとってもそのサイトの方向性や雰囲気を感じ取ってもらえることで、運営自体にもプラスとなることも多いはず。

 

あの有名な、とあるデザイナーが言ってました。

 

Design is not just what it looks like and feels like. Design is how it works.

デザインとは、単にどのように見えるか、どのように感じるかということではない。どう機能するかだ。

 

この言葉は分野を問わずにどのデザインにも共通する概念ではあるけど、特にWebデザインでは重要な言葉。もちろん、見た目から「いいデザイン」と思わせるファーストインプレッションはとても重要ではあるけどね。

 

 


 

 

私は、印刷や広告関係の業者で働いていたこともあり、ポスターや看板などのいわゆるグラフィックデザインはある程度長く知識を積んできている。しかし、このWordpressサイトのようなCSSやhtmlなどのWebに関わるデザインはまだまだ素人に毛が生えた程度。phpなんてまったく分からない。なんとなく「ここがこう動かしているんじゃろん?」という感覚しか持ち合わせていなかったりする。

そこで、私のサイト「Fragment」で細かい要素のCSSデザインを記事に起こして公開していくこと、それは “自分の勉強にもなるし読み手のメリットにもなり得るじゃないか” と、続けていくことの可能性を感じたわけです。

というところで、今回は当サイト「fragment」の雰囲気に合わせたCSSならではの要素のデザイン《button》を作ってみました。CSSデザインはまったくの初心者ですので、コードが汚い!などの細かいところはご指摘いただけると嬉ションします。

 

 


オリジナルボタン

 

まずは下のボタンとコードをご覧ください。

このボタンは、私が当サイト「fragment」の雰囲気に沿ったデザインに仕上げております。マウスオーバーで外側ラインのグラデーションが動きます。

スマホの場合ですと、ボタンを押している間はホバー効果が表れるようにontouchstart属性を使用しております。

 

 

 

 

 

ボタンのデザインを作るCSSコードと呼び出しのhtmlコードは下記になります。こちらのコードの値を変更することで、上記のボタンの色や形、大きさやバランスなど様々な変更を加える事ができます。

また、htmlコードをご覧になってお分かりになるように、classのalt要素としてテキストを載せておりますので、よくある <a href="#" class="btn">BUTTON</a> のようなボタンコードを下記デザインに変更しようとしてもafterである要素がズレてしまい、うまく適用表示されませんのでご注意ください。

 

htmlコード

<a href="#" class="fragment-button" alt="Button"></a>

CSSコード

/*ボタン*/
.fragment-button {
width:300px;
height:100%;
background-image: linear-gradient(90deg, #ddcf9f 0%, #ccb1c9 49%, #cdddc1 80%, #ddcf9f 100%);
border-radius:3px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2em;
text-decoration: none;
margin: auto;
}

.fragment-button:after {
content:attr(alt);
margin: 3px;
width:100%;
height:38px;
background-color:#fff;
display:flex;
align-items:center;
justify-content:center;
color: #666;
border-radius:3px;
}
.fragment-button:hover {
animation:slidebg 3s linear infinite;
}
@keyframes slidebg {
to {
background-position:600px;
}
}

 

 

 


AMP対応の落とし穴

※2018年12月7日追記

 

当ページがAMPテストで引っかかりました。原因は上記のhtmlコードであるalt属性でした。

imgタグ以外のaタグやdivタグではalt属性を指定するとAMPでは有効なページとして認証してくれません。AMPへと対応させるには下記のようにalt属性をtitle属性へと変更させます。cssコードもafter部分を下記のように変更します。

 

 

 

htmlコード

<a href="#" class="fragment-button" title="Button"></a>

cssコード

/*ボタン*/
.fragment-button {
width:300px;
height:100%;
background-image: linear-gradient(90deg, #ddcf9f 0%, #ccb1c9 49%, #cdddc1 80%, #ddcf9f 100%);
border-radius:3px;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2em;
text-decoration: none;
margin: auto;
}

.fragment-button:after {
content:attr(title);
margin: 3px;
width:100%;
height:38px;
background-color:#fff;
display:flex;
align-items:center;
justify-content:center;
color: #666;
border-radius:3px;
}
.fragment-button:hover {
animation:slidebg 3s linear infinite;
}
@keyframes slidebg {
to {
background-position:600px;
}
}

 

CSS設定ポイントの説明

 

・サイズはwidth: 300px;にしてますが、それぞれのサイトに合ったサイズに自由に変更してください。サイドバーやウィジェットなどで使う場合はwidth: 100%;でいいと思います。

・widthを変更した場合、バックのグラデーションのbackground-position:600px;の数値をwidthで設定した長さの倍数にしておくとグラデーションが途切れなくスムーズにいきます。(widthを%で指定した場合は、pxではなくvwなどを使用した細かい調整が必要になるかもしれません。)

・上記CSSのグラデーションカラー(background-image: linear-gradient;)は当サイトに合わせた配色をしていますので、ご自身のサイトに合った配色に変更しましょう。

・animation:slidebgで設定した時間の長さ(3s)で、@keyframes slidebgにて設定した長さ(600px)を移動します。width: 300px;に対して600pxを設定しているので、設定したグラデーションバックが2周を3秒かけて動くイメージです。

 

AMPページ対応エラーは頻度が高いですよねぇ。

これから先、生き残るWebサイトになるためにはAMP対応は必須ですので、エラーをひとつずつ自分で解決していくしかないでしょう。

その他、上記CSSの不具合やデザイン変更などのご指摘は Twitterアカウント までご連絡頂ければと思います。

ではでは。