テンプレート・素材カテゴリ


CSSだけで作る「ボタン」コレクション

TOPページ > デザイン講座 > CSSだけで作る「ボタン」コレクション

もうボタンですらCSSで作る時代になったんですね(笑)。私はまだ知識がないので、ネットで見つけたボタンをコレクションしていく予定です。

そのままでも立派なボタンに見えるのはもちろん、オンマウス時の変わり具合もなかなか見物です!参照ページへも遊びに行ってくださいね。



  押してみてください!
  ※コードは参考まで。
button.punch {
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: 10px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #1e2d4d;
  width: 150px;
  -webkit-background-clip: padding-box; }
  button.punch:hover {
    -webkit-box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  button.punch:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 58px; }

参照:CSS3 buttons by Chad Mazzola


LOOSEWORKS

.button_example{
border-top-color: #CB236C;border-right-color: #819BCB;border-bottom-color: #819BCB;border-left-color: #819BCB;border-width: 27px 1px 1px 1px;border-style: solid;-webkit-box-shadow: #B4B5B5 0px 1px 1px inset;-moz-box-shadow: #B4B5B5 0px 1px 1px inset; box-shadow: #B4B5B5 0px 1px 1px inset; -webkit-border-radius: 8px; -moz-border-radius: 8px;border-radius: 8px;font-size:44px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #3093C7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093C7), to(#1C5A85));
 background-image: -webkit-linear-gradient(top, #3093C7, #1C5A85);
 background-image: -moz-linear-gradient(top, #3093C7, #1C5A85);
 background-image: -ms-linear-gradient(top, #3093C7, #1C5A85);
 background-image: -o-linear-gradient(top, #3093C7, #1C5A85);
 background-image: linear-gradient(to bottom, #3093C7, #1C5A85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093C7, endColorstr=#1C5A85);
}

.button_example:hover{
 border-top-color: #FFDE0A;border-right-color: #819BCB;border-bottom-color: #819BCB;border-left-color: #819BCB;border-width: 27px 1px 1px 1px;border-style: solid;
 background-color: #26759E; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759E), to(#133D5B));
 background-image: -webkit-linear-gradient(top, #26759E, #133D5B);
 background-image: -moz-linear-gradient(top, #26759E, #133D5B);
 background-image: -ms-linear-gradient(top, #26759E, #133D5B);
 background-image: -o-linear-gradient(top, #26759E, #133D5B);
 background-image: linear-gradient(to bottom, #26759E, #133D5B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759E, endColorstr=#133D5B);
}

参照:Css Gradient Button - create css button


LOOSEWORKS
.btn01 {
    color: #fff;
    text-decoration: none;
    background-color: #dda0dd;
    display: block;
    width: 150px;
    height: 150px;
    line-height: 150px;
    border-radius: 50%;
    /* ここで動く速度とか設定 */
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.btn01:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
}

参照:ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel


LOOSEWORKS
.btn02 {
    color: #fff;
    display: block;
    text-decoration: none;
    background-color: #9EB8F3;
    width: 150px;
    padding: 30px 0;
}
.btn02:hover {
    animation: shake 0.2s linear infinite;
    -webkit-animation: shake 0.2s linear infinite;
}
@keyframes shake {
    0% { transform: translate(3px, 2px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-1deg); }
    20% { transform: translate(-4px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(1deg); }
    50% { transform: translate(-2px, 3px) rotate(-1deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(3px, 2px) rotate(-1deg); }
    80% { transform: translate(-2px, -2px) rotate(1deg); }
    90% { transform: translate(2px, 4px) rotate(0deg); }
    100% { transform: translate(2px, -3px) rotate(-1deg); }
}

参照:ワンポイントに使えるCSS3マウスオーバーアニメーション5種 | webOpixel


LOOSEWORKS
.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

参照:Button Maker


LOOSEWORKS
.shiny-button {
  display: inline-block;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  font-weight: normal;
  font-family: sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  background-color: #73B10E;
  background-image: -webkit-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: -moz-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: -o-linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  background-image: linear-gradient(top, #76b60e 0%, #86c028 48%, #73B10E 49%, #73B10E 82%, #84cb10 100%);
  border-color: hsl(83, 29%, 37%);
  -webkit-box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px #95e512, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-text-shadow: 1px 1px 1px #365207;
  -moz-text-shadow: 1px 1px 1px #365207;
  -o-text-shadow: 1px 1px 1px #365207;
  text-shadow: 1px 1px 1px #365207;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding: 9.600000000000001px 24px 9.600000000000001px 24px;
}

.shiny-button strong {
  letter-spacing: 1px;
  font-size: 16px;
}

.shiny-button:hover {
  color: #FFFFFF;
  background-color: #7cbf0f;
  background-image: -webkit-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: -moz-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: -o-linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  background-image: linear-gradient(top, #7fc40f 0%, #8fcc2b 48%, #7cbf0f 49%, #7cbf0f 82%, #8dd911 100%);
  border-color: hsl(83, 28%, 36%);
  -webkit-box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px #9eed1e, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-text-shadow: 1px 1px 1px #3f6008;
  -moz-text-shadow: 1px 1px 1px #3f6008;
  -o-text-shadow: 1px 1px 1px #3f6008;
  text-shadow: 1px 1px 1px #3f6008;
}

.shiny-button:active {
  color: #FFFFFF;
  background-color: #6aa30d;
  background-image: -webkit-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: -moz-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: -o-linear-gradient(top, #649a0c 0%, #73B10E 100%);
  background-image: linear-gradient(top, #649a0c 0%, #73B10E 100%);
  padding: 10.600000000000001px 24px 8.600000000000001px 24px;
}

参照:CSS Button Generator for your pleasure


Recommended


スマートフォンなど多様なデバイスに対応し、使い勝手や見栄えを向上させる各種のアレンジ・テクニック。

応用テクニックやその仕組み、さらに踏み込んだ各種の情報もTIPSとして網羅。

現場のワークフローに沿ったサイト制作までを詳しく解説。プロが教える「実習」+「講義」の全30レッスン。

これからのWeb制作に必要な知識を総合的に解説。HTML5 2014年勧告候補に対応!

はじめて学ぶ人は、サイトの作り方をゼロから習得。すでに覚えた人は、「正しい」方法を復習できる。



ページトップへ