From abfcaabd37d0052fef789464d6844e7ff28f7bda Mon Sep 17 00:00:00 2001 From: revav18 Date: Thu, 22 Sep 2022 13:16:01 -0400 Subject: [PATCH] Added fillup on hover button (#1647) --- src/components/hover/_fillup-on-hover.less | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/components/hover/_fillup-on-hover.less diff --git a/src/components/hover/_fillup-on-hover.less b/src/components/hover/_fillup-on-hover.less new file mode 100644 index 000000000..8c0fe3235 --- /dev/null +++ b/src/components/hover/_fillup-on-hover.less @@ -0,0 +1,34 @@ + +.fillUpBtn { + margin: 10px auto; + border: #dae6f2; + position: relative; + border-radius: 10px; + padding: 10px 35px; + font-size: 35px; + &::before { + transition: all 0.85s cubic-bezier(0.68,-0.55,0.265,1.55); + content: ''; + height: 100%; + width: 50%; + position: absolute; + left: 0; + top: 0; + border-radius: 5px; + border: #060606; + background: #a2ccf6; + } + /* fillUpBtnText is span class within button */ + .fillUpBtnText { + font-family: Georgia, 'Times New Roman', Times, serif; + mix-blend-mode: multiply; + color: #1ba5a5; + } + &:hover { + &::before { + width: 100%; + background: #124e89; + border-radius: 5px; + } + } +} \ No newline at end of file