CSS가있는 버튼에서 '클릭'애니메이션 효과

다음 버튼 (클릭 발췌 물 1 참조)에서 클릭 효과를 얻을 수 없습니다.CSS가있는 버튼에서 '클릭'애니메이션 효과

첫 번째 코드 조각에서는 float: left; 값을 얻지 만 코드에 삽입하면 버튼의 위치가 깨집니다. 내 '다음'버튼은 두 번째 스 니펫, 즉 세로 및 가로 가운데에있는 방식으로되어 있습니다.

아이디어를 얻으려면 여기를 클릭하십시오.

발췌문 1

.next-button { 
 
    transition: all 0.1s; 
 
\t -webkit-transition: all 0.1s; 
 
\t position: relative; 
 
\t padding: 10px 40px; 
 
    margin: 0px 10px 10px 0px; 
 
    float: left; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 25px; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #f9c60f; 
 
\t border-bottom: 5px solid #888888; 
 
\t text-shadow: 1px -2px #888888; 
 
} 
 

 
.next-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t border-bottom: 1px solid; 
 
}

<html lang="en"> 
 
<head> 
 
    <body> 
 
    <a href="#" class="next-button">NEXT</a> 
 
</body> 
 
</html>

코드 조각 2 (내 코드)

.next-button { 
 
    transition: all 0.1s; 
 
\t -webkit-transition: all 0.1s; 
 
\t position: relative; 
 
\t padding: 10px 40px; 
 
    margin: 0px 10px 10px 0px; 
 
    float: left; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 25px; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #f9c60f; 
 
\t border-bottom: 5px solid #888888; 
 
\t text-shadow: 1px -2px #888888; 
 
}.course-video { 
 
    background: #f9c70f; 
 
    border: none; 
 
    margin: 0; 
 
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset; 
 
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset; 
 
    border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    
 
} 
 

 
.next-video-button { 
 
    transition: all 0.1s; 
 
\t -webkit-transition: all 0.1s; 
 
\t padding:7px 200px; 
 
\t border-radius: 10px; 
 
\t font-family: 'Montserrat'; 
 
\t font-size: 1em; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
    background-color: #888888; 
 
\t border-bottom: 5px solid #5a5a5a; 
 
\t text-shadow: 1px -2px #888888; 
 
    text-align: center; 
 
    line-height:49px; 
 
    
 

 
} 
 

 
.next-video-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t border-bottom: 1px solid; 
 
} 
 

 
.video-title { 
 
    font-family: montserrat; 
 
    font-size: 1.5em; 
 
    color: #000000; 
 
    padding: 0.5em; 
 
    box-sizing: border-box; 
 
    width: 854px; 
 
    text-shadow: 0px 2px 4px rgba(0,0,0,0.3); 
 
} 
 

 
.video-descr { 
 
    width: 854px; 
 
    box-sizing: border-box; 
 
    height: 50px; 
 
    margin-top: -5px; 
 
    text-align:center; 
 
} 
 

 
.next-button:active { 
 
\t transform: translate(0px,5px); 
 
    -webkit-transform: translate(0px,5px); 
 
\t border-bottom: 1px solid; 
 
}

<div class="course-video video-title">Hello</div> 
 
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 
<div class="course-video video-descr"><a href="#" class="next-video-button">NEXT</a></div>

출처

2016-11-30 Ira

를 사용해보십시오 대신 inline-block를 사용

float:left

의

.next-video-button { 
    display:inline-block; 
    ... 
}

텍스트 정렬합니다뿐만 아니라 그것은 일

출처

2016-12-01 00:00:55 Beno

다음에서 작동합니다 그래서 같은 요소 행위 텍스트이었다 있습니다! 정말 고마워! – Ira

CSS가있는 버튼에서 '클릭'애니메이션 효과

답변

관련 문제