JSFiddle - React, Tailwind, and code Playground
by gotoworks510
HTML
<div class="box">
よく有り気なグラデーション入れてみたり...ってこれはボタンに多いかな
</div>
CSS
body{
background-color:#999;
}
.box{
padding:20px;
margin:40px;
background: #dddddd;
background: -webkit-linear-gradient(top, #dddddd 0%,#cccccc 50%,#eeeeee 51%,#cccccc 100%);
background: -moz-linear-gradient(top, #dddddd 0%, #cccccc 50%, #eeeeee 51%, #cccccc 100%);
background: -ms-linear-gradient(top, #dddddd 0%,#cccccc 50%,#eeeeee 51%,#cccccc 100%);
background: -o-linear-gradient(top, #dddddd 0%,#cccccc 50%,#eeeeee 51%,#cccccc 100%);
background: linear-gradient(to bottom, #dddddd 0%,#cccccc 50%,#eeeeee 51%,#cccccc 100%);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 1px solid #eee;
border-top: 1px solid #ffffff;
text-shadow: 1px 1px 1px #eee;
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}