Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; code_highlighter has a deprecated constructor in /home/thevosjp/thevos.jp/public_html/modules/editor/components/code_highlighter/code_highlighter.class.php on line 5
THEVOS - A simple pure CSS hover effect
※ 디자인 소재가 필요하신 방문객은 아래 배너를 이용하여 방문하여 무료 다운 받아 사용하시기 바랍니다.
無料デザインテンプレートなら【デザインAC】
여기에 등록된 디자인 소재는 일러스트AC에서 무료 다운 받은 소재이며 재 배포 할 수없는 소재이므로 방문객에게 제공 할 수 없는 디자인 소재 입니다.
당 사이트 고객의 홈페이지 제작 시 고객님께 제공 및 참조하기 위하여 준비된 디자인 소재 입니다.


UI Design

A simple pure CSS hover effect

by THEVOS posted Apr 21, 2023 Views 37 Likes 0 Replies 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form

btn-thevos001.jpg

A simple pure CSS hover effect

 

 

 


<button class="btn-thevos001"><span>Hover me!</span></button></div>

 

.btn-thevos001 {
    border: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    outline: none;
    overflow: hidden;
    position: relative;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    background-color: #222;
    padding: 17px 60px;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.20);
    text-decoration: none !important;
}

.btn-thevos001 span {
  position: relative; 
  z-index: 1;
}

.btn-thevos001:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 490%;
    width: 140%;
    background: #10a0e6;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
    transform: translateX(-98%) translateY(-25%) rotate(45deg);
}

.btn-thevos001:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

 

Facebook [ko]댓글 

?

  1. 21Apr

    A simple pure CSS hover effect

    CategoryUI Design Reply0 Views37 file
    Read More
  2. 03Dec

    Code Box Design

    CategoryUI Design Reply0 Views58 file
    Read More
  3. 14Mar

    Bread Papa Web design

    CategoryWeb Design Reply0 Views72 file
    Read More
  4. 14Mar

    Bakery Website Design

    CategoryWeb Design Reply0 Views105 file
    Read More
  5. 14Mar

    Bakery Website Design

    CategoryWeb Design Reply0 Views109 file
    Read More
  6. 13Mar

    Amirco & BlackLake

    CategoryWeb Design Reply0 Views89 file
    Read More
  7. 13Mar

    Amirco & BlackLake

    CategoryWeb Design Reply0 Views280 file
    Read More
목록
Board Pagination Prev 1 Next
/ 1