From 2ade03ebecd335ef77edce7583df8525dbb2ac0b Mon Sep 17 00:00:00 2001 From: Junior-18 <98383048+Junior-18@users.noreply.github.com> Date: Tue, 25 Oct 2022 21:04:50 +0530 Subject: [PATCH] Add files via upload --- Button Animations/index.html | 21 +++++++++++++ Button Animations/style.css | 57 ++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 Button Animations/index.html create mode 100644 Button Animations/style.css diff --git a/Button Animations/index.html b/Button Animations/index.html new file mode 100644 index 00000000..abb15c99 --- /dev/null +++ b/Button Animations/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + Animations + + +
+ + + + + +
+ + \ No newline at end of file diff --git a/Button Animations/style.css b/Button Animations/style.css new file mode 100644 index 00000000..b621a470 --- /dev/null +++ b/Button Animations/style.css @@ -0,0 +1,57 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: larger; +} +.container{ + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +i{ + color: #031059; + margin: 0 5px; + padding: 15px; + background-color: #ffffff; + border-radius: 5px; + transition: all .5s ease-in; + transition: background-color 0.5s ease; +} +i:hover{ + animation: 1.7s ease-out socie_beat infinite; +} +.fa-twitter:hover{ + color: #1DA1F2; +} +.fa-github:hover{ + color: #000101; +} +.fa-linkedin:hover{ + color: #0176B5; +} +.fa-facebook:hover{ + color: #1877F2; +} +.fa-youtube:hover{ + color: #FE0101; +} +@keyframes socie_beat{ + 10%{ + border-radius: 50%; + background-color: #ffcbff; + } + 40%{ + border-radius: 10%; + background-color: #90d4ff; + } + 70%{ + border-radius: 50%; + } +} +@media screen and (max-width: 460px){ + .container{ + flex-direction: column; + } +} \ No newline at end of file