簡単!初心者!タグ・html・css

<a href="#" class="classname">おもしろボタン</a>



CSSコードをCSSファイルかHTMLファイルの＜header＞タグ内に貼付けてください。(このホームページの場合、header内に記述しました)

<style type="text/css">
.classname {
-moz-box-shadow: 25px -31px 39px 7px #f7bef2;
-webkit-box-shadow: 25px -31px 39px 7px #f7bef2;
box-shadow: 25px -31px 39px 7px #f7bef2;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed63e2), color-stop(1, #cf47ca) );
background:-moz-linear-gradient( center top, #ed63e2 5%, #cf47ca 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed63e2', endColorstr='#cf47ca');
background-color:#ed63e2;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:2px solid #a13895;
display:inline-block;
color:#fa17b2;
font-family:Georgia;
font-size:20px;
font-weight:bold;
font-style:normal;
height:27px;
line-height:27px;
width:130px;
text-decoration:none;
text-align:center;
text-shadow:1px 0px 13px #e01bfa;
}.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cf47ca), color-stop(1, #ed63e2) );
background:-moz-linear-gradient( center top, #cf47ca 5%, #ed63e2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf47ca', endColorstr='#ed63e2');
background-color:#cf47ca;
}.classname:active {
position:relative;
top:1px;
}</style>