Twitter で使われている綺麗な CSS3 ボタンの様なものを実装する CSS のコード

ちょっと綺麗なボタンを実装したいなと思っているのに中々簡単に実装できないことがあると思います。ジェネレーターを使ってもイマイチ作れなかったりする人もいると思います。

以下のコードを貼りつければ一瞬でこのような Twitter みたいなボタンを実装できます。社内ツールとか適当に作ってるサービスなどに組み込んでください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

form input[type=button],
form input[type=submit] {
    color:#fff;
    text-align: center;
    background-color: #22AAFF;
    padding: 5px 10px;
    border-radius: 5px; /* CSS3 */
    cursor: pointer;
    text-shadow: 0px 0px 2px #39d;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#47c1ef), to(#339ade)); /* Safari */
    background: -moz-linear-gradient(top,#47c1ef,#339ade) no-repeat; /* FireFox */
    border: 1px #39d solid;
    opacity: 1;
}
form input[type=button]:hover,
form input[type=submit]:hover {
    opacity: 0.9;
}

以下のサイトを参考にさせて頂きました。

関連記事

コメント

コメントは受け付けていません。