下劃線按鈕WordPress的

菜單CSS所以我看到這個按鈕的設計，我真的很喜歡https://codepen.io/lukemeyrick/pen/apZOWm 下劃線按鈕WordPress的

$thick : 3px; 
$pad : 0.7em; 
$extra : calc(#{$pad} * 1.2); 
$color : #f26522; 

body { 
    background: #2d2d2d; 
} 

a { 
    position: fixed; 
    cursor: pointer; 
    top: 50vh; 
    left: 50%; 
    color: white; 
    transform: translate3d(-50%,-50%,0); 
    padding: $pad $extra; 
    display: inline-block; 
    border: $thick solid transparent; 
    position: relative; 
    font-size: 1.5em; 
    letter-spacing: 0.07em; 

    .text { 
    // padding: 0 0.3em; 
    font-family: proxima-nova; 
    transform: translate3d(0,$pad,0); 
    display: block; 
    transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s; 
    } 

    &:after { 
    position: absolute; 
    content: ''; 
    bottom: -$thick; 
    left: $extra; 
    right: $extra; 
    height: $thick; 
    background: $color; 
    z-index: -1; 
    transition: 
     transform 0.8s cubic-bezier(1,0,.37,1) 0.2s, 
     right 0.2s cubic-bezier(.04,.48,0,1) 0.6s, 
     left 0.4s cubic-bezier(.04,.48,0,1) 0.6s; 
    transform-origin: left; 
    } 

} 

.line { 
    position: absolute; 
    background: $color; 

    &.-right, 
    &.-left { 
    width: $thick; 
    bottom: -$thick; 
    top: -$thick; 
    transform: scale3d(1,0,1); 
    } 

    &.-top, 
    &.-bottom { 
    height: $thick; 
    left: -$thick; 
    right: -$thick; 
    transform: scale3d(0,1,1); 
    } 

    &.-right { 
    right: -$thick; 
    transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s; 
    transform-origin: top; 
    } 

    &.-top { 
    top: -$thick; 
    transition: transform 0.08s linear 0.43s; 
    transform-origin: left; 
    } 

    &.-left { 
    left: -$thick; 
    transition: transform 0.08s linear 0.51s; 
    transform-origin: bottom; 
    } 

    &.-bottom { 
    bottom: -$thick; 
    transition: transform 0.3s cubic-bezier(1,0,.65,1.01); 
    transform-origin: right; 
    } 
} 

a:hover, 
a:active { 

    .text { 
    transform: translate3d(0,0,0); 
    transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s; 
    } 

    &:after { 
    transform: scale3d(0,1,1); 
    right: -$thick; 
    left: -$thick; 
    transform-origin: right; 
    transition: 
     transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s, 
     right 0.2s cubic-bezier(1,0,.65,1.01), 
     left 0s 0.3s; 
    } 

    .line { 
    transform: scale3d(1,1,1); 

    &.-right { 
     transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s; 
     transform-origin: bottom; 
    } 

    &.-top { 
     transition: transform 0.08s linear 0.4s; 
     transform-origin: right; 
    } 

    &.-left { 
     transition: transform 0.08s linear 0.48s; 
     transform-origin: top; 
    } 

    &.-bottom { 
     transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s; 
     transform-origin: left; 
    } 
    } 

}

，並想在當前的主導航菜單代替使用它的http://hcldesign.co.uk/我的WordPress網站。

現在，這是SCSS，我不是如果和如何，我將能夠在我的網站上使用它。

是否有可能將此按鈕添加到我的導航菜單，我怎麼能做到這一點？
是否可以將SCSS轉換爲CSS？或者在WordPress中使用SCSS。

感謝，

哈維

來源

2017-08-03 Harvey

是的，你可以轉換SCSS到CSS。你可以在這裏閱讀更多關於SCSS的信息http://sass-lang.com/documentation/file.SCSS_FOR_SASS_USERS.html。您可以在codepen中獲得已編譯的CSS，只需單擊CSS部分上的右箭頭並選擇View compiled CSS。 – boang3000

好吧，在codepen上的代碼中，它也具有帶樣式的HTML。這些顯然不同於我的wordpress主題上的內容，關於如何使用我的主題工作的任何想法，或者我可以在哪裏以及如何添加樣式？ – Harvey

如果您想要關注codepen中的內容，您需要在菜單中的每個錨標記中添加span元素，請檢查此鏈接https://wordpress.stackexchange.com/questions/216286/how-to-add-然後你可以在你的styles.css文件中添加CSS文件。先試一試。 – boang3000

是肯定的，這應該是可能的，我不明白爲什麼不能
如果你想它迅速轉換，你可以使用類似的工具：

SCSS to CSS

來源

2017-08-06 19:55:48 Michael

下劃線按鈕WordPress的

回答

相關問題