로그인

검색

WEB
2017.12.14 10:31

Text 애니메이션 Hover 효과

조회 수 73 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

 

Body

<!-- HINT: hover over button -->
<div class="c--anim-btn">
  <span class="c-anim-btn">
    First Text
  </span>
  <span>
    Second Text
  </span>
</div>

 

 

CSS

.c--anim-btn span {
  color: white;
  text-decoration: none;
  text-align: center;
  display: block;
}

.c--anim-btn, .c-anim-btn {
  transition: 0.3s;     
}

.c--anim-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial,sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.c-anim-btn{
  margin-top: 0em;   
}

.c--anim-btn:hover .c-anim-btn{
  margin-top: -4em;
}

 

 

 

https://codepen.io/RichardBray/pen/julhw

?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 XE/Rhmix 오라클 클라우드 - 우분투(Ubuntu) php7.3에서 php7.4로 업그레이드 하기 꽃지닷컴 2022.03.17 88
공지 XE/Rhmix 라이믹스,XE 외부페이지 php 보안관련 꽃지닷컴 2022.03.16 90
공지 XE/Rhmix PHP PDO CRUD with ajax jQuery and Bootstrap 회원관리(사진등록) file 꽃지닷컴 2021.03.19 668
공지 XE/Rhmix soengsouy- PHPCRUD ALL FILE file 꽃지닷컴 2021.03.19 130
공지 XE/Rhmix [구매하자] CRUD Application with PHP, PDO, and MySQL secret 꽃지닷컴 2021.03.19 0
공지 XE/Rhmix 라이믹스 사이트 모음 꽃지닷컴 2021.03.02 266
공지 XE/Rhmix XE 참고 사이트 모음 secret 꽃지닷컴 2017.04.13 134
85 XE/Rhmix 비로그인 스케치북 글쓰기시 이메일 홈페이지 없애기 꽃지닷컴 2018.02.27 556
84 WEB 레이아웃 구조잡기 - html5 file 꽃지닷컴 2018.02.26 59
83 CSS CSS 기초강좌 - 반응형 file 꽃지닷컴 2018.02.26 43
82 WEB team secret 꽃지닷컴 2018.02.25 0
81 XE/Rhmix 문의게시판 위젯 꽃지닷컴 2018.02.23 61
80 WEB Fontawsome 내 사이트에 위치 시키기 꽃지닷컴 2018.02.23 37
79 XE/Rhmix 아플로스 스킨 질의답변 게시판 설정 꽃지닷컴 2018.02.23 69
78 PC 오피스 실행이 안될때 file 꽃지닷컴 2018.02.14 74
77 XE/Rhmix 본문 테두리 주기 꽃지닷컴 2018.02.05 56
76 Joomla 줌라 무료 테마 설치하기 꽃지닷컴 2018.01.31 279
75 XE/Rhmix 모바일 또는 이외기기 조건문으로 다르게 보이기 꽃지닷컴 2018.01.04 201
74 XE/Rhmix XE 레이아웃 만들기 file 꽃지닷컴 2017.12.30 217
73 XE/Rhmix 채팅 스크립트 Channel 꽃지닷컴 2017.12.28 198
72 English 미국인들이 가장 많이 쓰는 100문장 꽃지닷컴 2017.12.28 51
71 WEB Font-awsome 적용하기 꽃지닷컴 2017.12.24 65
70 WEB 하이브리드 채팅 연동 secret 꽃지닷컴 2017.12.17 0
69 WEB CSS 버튼 animation 효과 꽃지닷컴 2017.12.16 105
» WEB Text 애니메이션 Hover 효과 꽃지닷컴 2017.12.14 73
67 WEB TEXT 슬라이드 효과주기 꽃지닷컴 2017.12.14 689
66 편집파일 /layouts/xe_kimtajo_layout/css 꽃지닷컴 2017.12.06 208
Board Pagination Prev 1 ... 5 6 7 8 9 10 11 12 13 14 Next
/ 14