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 71 Likes 0 Replies 0
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
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 [ja]コメント 

?

  1. 21Apr

    A simple pure CSS hover effect

    CategoryUI Design Reply0 Views71 file
    Read More
  2. 03Dec

    Code Box Design

    CategoryUI Design Reply0 Views106 file
    Read More
  3. 14Mar

    Bread Papa Web design

    CategoryWeb Design Reply0 Views106 file
    Read More
  4. 14Mar

    Bakery Website Design

    CategoryWeb Design Reply0 Views143 file
    Read More
  5. 14Mar

    Bakery Website Design

    CategoryWeb Design Reply0 Views137 file
    Read More
  6. 13Mar

    Amirco & BlackLake

    CategoryWeb Design Reply0 Views113 file
    Read More
  7. 13Mar

    Amirco & BlackLake

    CategoryWeb Design Reply0 Views304 file
    Read More
リスト
Board Pagination Prev 1 Next
/ 1