Skip to content →

グラデーションボタン

背景グラデーション、文字影、ボックスシャドーの合わせ技。
リンクボタン


.greenbt{
background: #bfd255; /* Old browsers */
background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
border:solid 2px #fff;
box-shadow: 0px 2px 4px #666666 !important;
color:#fff;
font-weight:bold;
font-size:1.4em;
text-shadow: 1px 1px 1px #666666 , -1px -1px 1px #cccccc;
text-decoration:none;
padding:18px 22px;
box-sizing:border-box;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
}

.greenbt:hover{
color:#fafafa;
text-shadow: 1px 1px 1px #ccc , -1px -1px 1px #666666;
box-shadow: 0px 1px 2px #aaaaaa !important;
}



メッセージを入力してください



Published in CSS

Help-Desk