기초의 모든 버튼에 대해 .button 클래스 설정

Question

기본적으로 모든 html 버튼에 .button 클래스를 설정할 수 있습니까?

재단은 클래스 .button의 버튼에 대해서만 스타일을 지정하지만 버튼에는 많은 버튼이 있으므로 .button 클래스를 추가하지 않고도이 모든 스타일을 설정할 수 있습니다.

Answer 1

a) 특수성 문제가 발생할 수 있지만 CSS/sass 파일을 편집하여 .button이 아닌 button에 직접 적용 할 수 있습니다.

b) 프레임 워크의 scss/sass 버전을 사용하는 경우 extends 속성을 사용할 수 있습니다. 은`@extend 재산의 http://foundation.zurb.com/sites/docs/sass.html

자세한 내용은 여기에서 찾을 수 있습니다 : http://sass-lang.com/guide

C를이 모든 button 요소 당신은 여기에 말대꾸 버전을 얻을 수 있습니다 .button 클래스

button { 
    @extend .button; 
} 

을의 스타일을 상속 의미합니다) 또는 일부 자바 스크립트를 실행하여 클래스를 모든 버튼에 추가 할 수 있습니다.

진실은 실제로 클래스를 올바르게 추가하는 것이 바람직하지 않다고 생각하지만 이것이 왜 옵션이 아닌지에 대한 충분한 이유가 있다고 가정합니다.

1) 사스 의미 : 여기

당신은 2 옵션이 버튼

Answer 2

$(document).ready(function() { 
 
    $('button').addClass("button"); 
 
});

.button { 
 
    background: steelblue; 
 
    color: #fff; 
 
    /* foundation button styles */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<button>Im a button</button>

로 클래스 추가 JQuery와 예이다. @ 브래드가 그것을 가리키고 있습니다.

사용 말대꾸이 예처럼, 당신의 버튼에 대한 의미 론적 마크 업을 만들려면 :

뭔가 같은 :

.custom-button-class { 
 
    border-style: solid; 
 
    border-width: 0px; 
 
    cursor: pointer; 
 
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
 
    font-weight: normal; 
 
    line-height: normal; 
 
    margin: 0 0 1.25rem; 
 
    position: relative; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
    display: inline-block; 
 
    padding-top: 1rem; 
 
    padding-right: 2rem; 
 
    padding-bottom: 1.0625rem; 
 
    padding-left: 2rem; 
 
    font-size: 1rem; 
 
    background-color: #008CBA; 
 
    border-color: #007095; 
 
    color: #FFFFFF; 
 
    -webkit-transition: background-color 300ms ease-out; 
 
      transition: background-color 300ms ease-out; 
 
} 
 
.custom-button-class:hover, .custom-button-class:focus { 
 
    background-color: #007095; 
 
} 
 
.custom-button-class:hover, .custom-button-class:focus { 
 
    color: #FFFFFF; 
 
} 
 

 
input[type="button"] { 
 
    border-style: solid; 
 
    border-width: 0px; 
 
    cursor: pointer; 
 
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 
 
    font-weight: normal; 
 
    line-height: normal; 
 
    margin: 0 0 1.25rem; 
 
    position: relative; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0; 
 
    display: inline-block; 
 
    padding-top: 1rem; 
 
    padding-right: 2rem; 
 
    padding-bottom: 1.0625rem; 
 
    padding-left: 2rem; 
 
    font-size: 1rem; 
 
    background-color: #008CBA; 
 
    border-color: #007095; 
 
    color: #FFFFFF; 
 
    -webkit-transition: background-color 300ms ease-out; 
 
      transition: background-color 300ms ease-out; 
 
} 
 
input[type="button"]:hover, input[type="button"]:focus { 
 
    background-color: #007095; 
 
} 
 
input[type="button"]:hover, input[type="button"]:focus { 
 
    color: #FFFFFF; 
 
}

<a class="custom-button-class" href="">hola</a> 
 

 
<button>hello</button> 
 

 
<input type="button" value="foundation class button">

http://www.sassmeister.com/gist/b038198f6e0049b8bc3bb1c19231aed0

2) 계산 된 스타일을 복사