2017-06-09 15 views
-1

私はLeadPagesで構築された素晴らしいランディングページを手に入れましたが、現時点でそれを支払う余裕はありません。それはかなりよく変換します:CSSのボタンに空白を追加

https://www.anxietysupportnetwork.com/purpose-fairy-landing 

とにかく、私は同じではありませんが、私の独自のバージョンを作っています。私は、そのボタンをクリックすると非常に明白にするために画面の幅にして欲しいです。どのように私は同じに見えるために私のボタンのスタイルを設定します:

https://www.anxietysupportnetwork.com/purpose-fairy/

を私はそう私に簡単にアクセスしてください、初心者コーダよ!これはあなたのために働く願っていますあなたのCSSファイルの変更を行い、このコードを追加してみ

ダン

+2

あなたはここでの問題を示してマークアップではなく、将来的に誰を助けない明日変更されますあなたのウェブサイトへのリンクの最小限の例を投稿することが要求されます。 – Rob

答えて

0

"ここをクリックして100%無料"ボタンを意味します。ボタンの幅をページの幅にする場合は、CSSファイルのバージョンにwidth:100%を追加してみてください。あなたがもっと助けが必要な場合は、コメントしてください。

+0

それはうまくいった。完璧! – Dan

+0

@ダン私のソリューションがあなたの問題を解決した場合、それを解決策としてマークしてください;) – Chesswithsean

0

、事前にあなたの助けに感謝!

.site-inner, .wrap { 
    margin: 0 auto; 
    max-width: 1100px; 
    } 


    .cubutton { 
    display: block; 
    box-sizing: border-box; 
    border-radius: 99999px; 
    background-color: #44ace8; 
    color: #fff; 
    cursor: pointer; 
    font-family: 'Quicksand', sans-serif; 
    font-size: 20px; 
    font-size: 2.0rem; 
    font-weight: 700; 
    text-align: center; 
    letter-spacing: 1px; 
    padding: 20px 40px 20px 40px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    width: 100%; 
    text-transform: uppercase; 
    -webkit-font-smoothing: antialiased; 
    -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75); 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    -o-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
} 
0

code pen link

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script> 
<style> 
.myBtn { 
    color: white; 
    background-color: #44ace8; 
    border-color: #44ace8; 
    border-radius: 30px; 
    padding: 20px; 
} 
.myBtn:hover { 
    color: black; 
} 
    </style> 
</head> 
<body> 

<div class="container"> 
    <div class="btn-group btn-group-justified"> 
    <a href="#" class="btn myBtn">CLICK HERE – IT’S 100% FREE</a> 
    </div> 
</div> 

</body> 
</html> 
関連する問題