2019/10/16 2022/06/19

【CSS】ボタンをカッコいい感じにしてみた！【コード付き】

こんにちは、みったにです。

こちらのツイートが思った以上に反応が良かったので、ブログで紹介してみようと思います。

progateやドットインストールも使ったけど、YouTubeも教材の宝庫ですね！
無料なので、見放題です♪
面白そうな動画があったので、マネして作ってみました。ちなみにHTMLとCSSだけで書かれています🙂 pic.twitter.com/TU6M9B2CAG

— しのん@Webメモ💻 (@shinon_memo) 2019年10月15日

【CSS】ボタンをカッコいい感じにしてみた！

YouTubeにて、CSSを使ってボタンをカッコよく実装している動画があったので、動画を見つつ、写経をしてみました。

その動画が以下です。

ホントにかっこいいですよね。こういった感じの雰囲気に憧れます。

YouTubeの動画は意外とクオリティが高い話

YouTubeの動画は無料で視聴できるため、軽視されがちかもですが、実はこの動画みたいに質の高いプログラミング動画が多いです。

そして、質の高い動画は、たいてい海外の動画が多いと思います。なので、解説も英語のものが多いです。ちなみに、この動画はインドの動画みたいです。

とはいえ、重要なのはコードなので、コードがわかれば英語が分からなくても問題ないと思います。

動画の学習というと、ドットインストールが有名かもですが、YouTubeもありですよ。

コードを写経してみました

ちなみに写経したコードはこんな感じです。

不思議と、動画を見ると同じように書きたくなりますよ。ちなみにボタン色は少しアレンジしてグリーンにしてます^^

【HTML】


<a href="#">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 Neon Button
</a>

【CSS】


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #031321;
  font-family: consolas;
}
a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #92FF0C;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-decoration: none;
  font-size: 24px;
  overflow: hidden;
  transition: 0.2s;
}
a:hover {
  color: #28A305;
  background: #86FF10;
  box-shadow: 0 0 10px #86FF10, 0 0 40px #86FF10, 0 0 80px #86FF10;
  transition-delay: 1s;
}
a span {
  position: absolute;
  display: block;
}
a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,transparent,#86FF10);
}
a:hover span:nth-child(1) {
  top: 0;
  left: 100%;
  transition: 1s;
}
a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg,transparent,#86FF10);
}
a:hover span:nth-child(3) {
  right: 100%;
  transition: 1s;
  transition-delay: 0.5s;
}
a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg,transparent,#86FF10);
}
a:hover span:nth-child(2) {
  top: 100%;
  transition: 1s;
  transition-delay: 0.25s;
}
a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg,transparent,#86FF10);
}
a:hover span:nth-child(4) {
  bottom: 100%;
  transition: 1s;
  transition-delay: 0.75s;
}

こんな感じですね。
動画ではすごくスムーズにコーディングしており、このようにコーディングできたら、かっこいいですね。このレベルを目指したいです♪

では、今回は以上です。
ここまでお読みいただき、ありがとうございました。