Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【CSS】ボタン - ホバーエフェクト作ったよ??

 

コードロップスさんの記事を参照 & 自己アレンジしてみました?

Line Menu Styles --- Codrops ---

 

 

 

 

html

<button class="btn type1">Type1
</button>

 

CSS

 /*=========  background ==========*/
 body {
	background:radial-gradient(#444141, #272222, #222);
	background-repeat:no-repeat;
	}
 /* ここははてなブログの記事投稿の際は".page-entry .entry" に変えています */ 
/*===================*/
.btn {
	position:relative;
	z-index:0;
	display:block;
	margin:25px auto;
	width:120px;
	height:60px;
	font-size:20px;
	line-height:20px;
	border:none;
	color:#fff;
	overflow:hidden;
	}



/*========  Type1  ===========*/
.type1 {
	background:#2a2a2a;
	}
.type1::before {
	position:absolute;
	right:100%;
	bottom:95%;
	width:200%;
	height:5%;
	z-index:1;
	content:'';
	border-radius:0 25px 25px 0;
	background:linear-gradient(to left, #FCE33D 50%, #00bdee 50%,  #00bdee 95%);
	transition:all .6s ease;
	}
.type1:hover::before {
	right:-100%;
	}
.type1::after {
	position:absolute;
	left:100%;
	top:95%;
	width:200%;
	height:5%;
	z-index:1;
	content:'';
	border-radius:25px 0 0 25px;
	background:linear-gradient(to right, #FCE33D 50%, #00bdee 50%,  #00bdee 95%);
	transition:all .6s ease;
	}
.type1:hover::after {
	left:-100%;
	}
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️