MENU

SWELLボタンブロックの使い方を紹介｜アニメーションをつける方法も

SWELLボタンブロックの使い方を動画で解説しています。

グラデーションのかけ方やアニメーションの設定方法も紹介していますので、ぜひ参考にしてみてください。

目次

動画内で紹介しているCSS

動画内で紹介しているCSS

ボタンの縦幅を変える

.btn-height a{
height:80px;
line-height:56px;
}

ボタンの動き

.btn_move {
animation-name:fuwafuwa;
animation-delay:0s;/*アニメーション開始時間 */
animation-duration: 3s;/*アニメーション動作時間 */
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; 
}
 
@keyframes fuwafuwa {
0% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}

スマホの時横幅100％にする

/*スマホ*/
@media screen and (max-width: 599px) {
.btn_move a{
width:100%;
}
}

ブログ運営者

2013年からインターネット業界に参入し、9年目突入。アフィリエイト事業・Webデザイン業を経て現在は女性、初心者向けのWordPress講座を運営中。