중심 스팬 후

Question

는 의미 UI 특히 애니메이션 쇼핑 카트 하나 https://semantic-ui.com/elements/button.html

내가 CSS를 변환을 사용하여 한 곳 나는 여기에 바이올린을 만들어에 애니메이션 버튼 중 하나를 사용할 만들려고 변환.

https://jsfiddle.net/n37arru2/100/

내 질문이 방법은 수직으로이 수평 CSS 속성을 왼쪽 상단을 사용하지 않고 가져가에있는 슬라이드 스팬을 놓고입니까? 상기 관계와 절대 배치를 갖는 엘리먼트의 중심을 사용

top: 50%; 
left: 50%; 
transform:translate(-50%,-50%); 

:

button { 
 
    position: relative; 
 
    transition: all .6s linear 
 
} 
 

 
i { 
 
    color: #FFF; 
 
    font-size: 34px !important; 
 
    /* 24px preferred icon size */ 
 
    vertical-align: middle; 
 
    transition: transform .6s linear; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: -45px; 
 
    left: 14px; 
 
    transition: top .6s linear; 
 
} 
 

 
button:hover > i { 
 
    transform: translate3d(0px, 45px, 0px); 
 
} 
 

 
button:hover > span { 
 
    top: 12px; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
<button class="btn btn-primary"> 
 
    <i class="material-icons">face</i> 
 
    <span>Face</span> 
 
</button>

Answer 1

span { 
    position: absolute; 
    top: -45px; 
    left: 14px; 
    transition: top .6s linear; 
} 

대신 숫자 주위 조정의 이러한 사용할 수있다 그것의 부모 컨테이너에. 따라서 처음에는 스팬을 음의 최고 값으로 설정하고 전환 설정을 50 %로 설정하면됩니다.

span { 
    position: absolute; 
    top: -50%; 
    left: 50%; 
    transform:translate(-50%,-50%); 
    transition: top .6s linear; 
} 

button:hover > span { 
    top: 50%; 
} 

button{ 
 
    position: relative; 
 
    transition: all .6s linear 
 
} 
 

 
i { 
 
    color: #FFF; 
 
    font-size: 34px !important; /* 24px preferred icon size */ 
 
    vertical-align: middle; 
 
    transition: transform .6s linear; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    top: -50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
    transition: top .6s linear; 
 
} 
 

 
button:hover > i { 
 
    transform: translate3d(0px, 45px, 0px); 
 
} 
 

 
button:hover > span { 
 
    top: 50%; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    
 
<button class="btn btn-primary"> 
 
    <i class="material-icons">face</i> 
 
    <span>Face</span> 
 
</button>