ホバーした時クリックした時もぽよんっする

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

css

ホバーした時クリックした時もぽよんっする

2023/02/28

マウスオーバー

基本のHTML・css

<span class="token style"><span class="token language-css"><span class="token selector">.btn</span> <span class="token punctuation">{</span>
	<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
	<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
	<span class="token property">place-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
	<span class="token property">margin</span><span class="token punctuation">:</span> 1em auto 0<span class="token punctuation">;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
	<span class="token property">border-radius</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
	<span class="token property">color</span><span class="token punctuation">:</span> ghostwhite<span class="token punctuation">;</span>
	<span class="token property">font-size</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span>
	<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Ubuntu Condensed"</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
	<span class="token property">letter-spacing</span><span class="token punctuation">:</span> .06em<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span> #86c0de<span class="token punctuation">;</span>
	<span class="token property">transition</span><span class="token punctuation">:</span> color .3s<span class="token punctuation">,</span> background .3s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn:hover</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>200deg 62% 75%<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token property">animation</span><span class="token punctuation">:</span> poyo .6s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn:active</span> <span class="token punctuation">{</span>
	<span class="token property">color</span><span class="token punctuation">:</span> gainsboro<span class="token punctuation">;</span>
	<span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">hsl</span><span class="token punctuation">(</span>200deg 47% 60%<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token property">transition-duration</span><span class="token punctuation">:</span> .1s<span class="token punctuation">;</span>
	<span class="token property">animation</span><span class="token punctuation">:</span> push .6s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> poyo</span> <span class="token punctuation">{</span>
	<span class="token selector">10%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.9<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.04<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.98<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@keyframes</span> push</span> <span class="token punctuation">{</span>
	<span class="token selector">10%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.8<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">40%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">60%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>.96<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
	<span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.02<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span></span></span>

.btn {

cursor: pointer;

display: grid;

place-items: center;

width: 300px;

margin: 1em auto 0;

padding: 40px;

border: 0;

border-radius: 16px;

color: ghostwhite;

font-size: 2em;

font-family: "Ubuntu Condensed", sans-serif;

letter-spacing: .06em;

background: #86c0de;

transition: color .3s, background .3s;

}

.btn:hover {

color: white;

background: hsl(200deg 62% 75%);

animation: poyo .6s;

}

.btn:active {

color: gainsboro;

background: hsl(200deg 47% 60%);

transition-duration: .1s;

animation: push .6s;

}

@keyframes poyo {

10% { transform: scale(1.2); }

40% { transform: scale(.9); }

60% { transform: scale(1.04); }

80% { transform: scale(.98); }

}

@keyframes push {

10% { transform: scale(.8); }

40% { transform: scale(1.1); }

60% { transform: scale(.96); }

80% { transform: scale(1.02); }

}


</code><code>

1 2	</code><code>