레인보우 css 버튼입니다.

Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

레인보우 css 버튼입니다.

웹서핑중에 적용한 css 레인보우 버튼입니다.  이것 말고도   시각적으로 도움될듯 한 소스 들도 있네요.


크롬에서 보세요... 링크 : http://rwdb.kr/interestedeffects/


레인보우 버튼 소스입니다. 심플한 화이트 컬러의 홈페이지에 생동감이 있을듯하네요.


클래스명은 "test" 이부분만 본인의 이름으로 지정해서 사용하시면 될듯합니다.

버튼 넓이는 : 글자수에 따라서 늘어납니다.

폰트 값을 조절해서 사용해보세요.

그리고..크롬에서 잘보입니다.


style

---------------------------------------------
#test{
  padding: 60px;
  background: #eee;
  min-height: 100vh;
}

@-webkit-keyframes sparkle {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 200% 100%;
  }
}

@keyframes sparkle {
  from {
    background-position: 0% 100%;
  }
  to {
    background-position: 200% 100%;
  }
}
.test{
  background: white;
  display: inline-block;
  padding: 1em;
  font-family: Helvetica Neue;
  border-radius: 4px;
  position: relative;
}
.test:before {
  -webkit-animation: sparkle 4s infinite linear;
          animation: sparkle 4s infinite linear;
  background: -webkit-gradient(linear, left top, right top, from(#7FEFBD), color-stop(11%, #FFF689), color-stop(22%, #EC0B43), color-stop(33%, #7FEFBD), color-stop(44%, #FFF689), color-stop(55%, #EC0B43), color-stop(66%, #7FEFBD), color-stop(77%, #FFF689), color-stop(88%, #EC0B43), to(#7FEFBD));
  background: linear-gradient(90deg, #7FEFBD 0%, #FFF689 11%, #EC0B43 22%, #7FEFBD 33%, #FFF689 44%, #EC0B43 55%, #7FEFBD 66%, #FFF689 77%, #EC0B43 88%, #7FEFBD 100%);
  background-size: 300% 100%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  -webkit-filter: blur(5px);
          filter: blur(5px);
  z-index: -1;
  -webkit-transform: scale(0.99) translateY(3px);
          transform: scale(0.99) translateY(3px);
}

---------------------------------------
/style


0 Comments
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand