monacaで使うcssの釦の色を変えたい
現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。
<a class="button--large" href="mentenance_index.html">テスト1</a>
<a class="button--large" href="mentenance_index.html">テスト2</a>
<a class="button--large" href="mentenance_index.html">テスト3</a>
このときにこのボタンの色を変えたいと思うのですが、
"css/style.css"
このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか?
ちなみに、
.button--large {
.....(中略)......
background-color: #1284ff;
.....(中略)......
}
この部分だと自分は思い、
background-color: #00008b; というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。
この button02--large クラスの内容も掲載させて頂きます。
どうぞ、ご教示の程よろしくお願い致します。
.button--large {
text-align: center;
position: relative;
display: inline-block;
vertical-align: top;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
height: auto;
text-decoration: none;
padding: 4px 20px;
font-size: 16px;
line-height: 36px;
letter-spacing: 0;
color: #fff;
text-shadow: 0 1px none;
vertical-align: middle;
background-color: #1284ff;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
-moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
-o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear;
font-weight: 400;
font-size: 16px;
font-weight: 500;
line-height: 36px;
padding: 4px 20px;
display: block;
width: 100%;
}
.button--large:active {
background-color: #1284ff;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
opacity: 0.6;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.button--large:disabled {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.button--large:hover {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.button--large:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: 0;
}
お礼
ご回答ありがとうございました。 デフォルトのボタンをやめて、形を統一したいと思います。 BUTTON要素を勉強して組み込みたいと思います。