1. ホーム
  2. 質問と答え
  3. CSSボタンの効果が

CSSボタンの効果が

2017-03-11 9 views
-2

動作しませんが、私のウェブサイトは、この enter image description hereCSSボタンの効果が

は、私は私のウェブサイトへのCSSコードをコピーし表示し、それは私が何を編集する必要があり、画像2のように表示されますか？

私のウェブサイト：http://www.giterwork.acsite.org/member/signup.php

出典

2017-03-11 Tiger Liu

+0

、問題のコードを入力してください。 – br3t

+0

ありがとうと私は答えている:) –

答えて

0

それは私のコード:)です

#button { 
 
    background-color:#3bb3e0; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size:12px; 
 
    text-decoration:none; 
 
    color:#fff; 
 
    position:relative; 
 
    padding:10px 20px; 
 
    padding-right:50px; 
 
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
 
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
 
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
 
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
 
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 
 
    background-image: -webkit-gradient(
 
    linear, 
 
    left bottom, 
 
    left top, 
 
    color-stop(0, rgb(44,160,202)), 
 
    color-stop(1, rgb(62,184,229)) 
 
    ); 
 
    -webkit-border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -o-border-radius: 5px; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
 
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
 
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
 
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; 
 
} 
 

 
#button:active { 
 
    top:3px; 
 
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 
 
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 
 
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 
 
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 
 
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 
 
    background-image: -webkit-gradient(
 
    linear, 
 
    left bottom, 
 
    left top, 
 
    color-stop(0, rgb(62,184,229)), 
 
    color-stop(1, rgb(44,160,202)) 
 
    ); 
 
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; 
 
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; 
 
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; 
 
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; 
 
} 
 

 
#button::before { 
 
    background-color:#2591b4; 
 
    background-image:url(../images/right_arrow.png); 
 
    background-repeat:no-repeat; 
 
    background-position:center center; 
 
    content:""; 
 
    width:20px; 
 
    height:20px; 
 
    position:absolute; 
 
    right:15px; 
 
    top:50%; 
 
    margin-top:-9px; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; 
 
    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; 
 
    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; 
 
    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; 
 
} 
 

 
#button:active::before { 
 
    top:50%; 
 
    margin-top:-12px; 
 
    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; 
 
    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; 
 
    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; 
 
    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; 
 
}
<html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" type="text/css" href="style2.css" /> 
 
    <title>美利集团线上加盟系统</title> 
 
</head> 
 
<body> 
 
    <div id="main"> 
 
    <form action="<?php echo $editFormAction; ?>" id="form1" name="form1" method="POST"> 
 
     <table class="main_table"> 
 

 
     <tr> 
 

 
      <td colspan="2" align="right"><input type="submit" name="button" id="button" value="submit" /></td> 
 
     </tr> 
 
     </table> 
 
     <input type="hidden" name="MM_insert" value="form1"> 
 
    </form> 
 
    <br /> 
 
    </div> 
 
<div id="footer"></div></body> 
 
</html>

出典

2017-03-12 00:07:26

関連する問題

 関連する問題