#151 Button styles changed
Merged 3 months ago by jflory7. Opened 3 months ago by phoenixabhishek.

Button styles changed
PhoeniXAbhisheK • 3 months ago  
file modified
+28 -15

@@ -81,16 +81,41 @@

  

  .btn {

      background: white;

-     border: 1px solid var(--secondary-color);

      color: var(--secondary-color);

-     text-transform: uppercase;

      padding: 0.9em 1.3em;

+     margin: 2em;

+     border: 2px solid var(--secondary-color);

+     border-radius: 2em;

+     text-transform: uppercase;

  }

  

  .btn:hover {

      background: var(--secondary-color);

      color: white;

-     border: 1px solid var(--secondary-color);

+     font-weight: bold;

+ }

+ 

+ .btn-primary:hover{

+     font-weight: normal;

+     border-color: var(--secondary-color);

+ }

+ 

+ .btn-primary:hover img.emoji{

+     transition: 0.6s ease-in;

+     transform: scale(1.08) rotate(360deg);

+ }

+ 

+ .btn-login, .btn-logout {

+   background: none;

+   color: white;

+   border-color: #fff;

+   padding: 14px 20px 12px 20px;

+ }

+ 

+ .btn-login:hover, .btn-logout:hover{

+     background: #fff;

+     color: var(--primary-color);

+     border-color: #fff;

  }

  

  .row.content {

@@ -163,18 +188,6 @@

      vertical-align: initial;

  }

  

- .btn-login, .btn-logout {

-   background: none;

-   color: white;

-   border: none;

- }

- 

- .btn-login:hover, .btn-logout:hover {

-     background: none;

-     color: white;

-     border: none;

- }

- 

  .sharebutton {

      position: relative;

      height: 28px;

The current style of buttons are squared.
The approved suggestion of making it capsule shaped has been addressed in this PR.

Some general styles for buttons have been updated to avoid rework in future.

Buttons have been given an interactive hover effect.
Login/logout buttons had no hover effect, so added.
CTA buttons, on hover, will result in the letter emoji making a 360deg turn.

As per discussed in #139

Updates can be seen here

Metadata Update from @jflory7:
- Pull-request tagged with: new change, type - frontend, type - summer coding
- Request assigned

3 months ago

@phoenixabhishek Thanks, I tested this and the change looks good. I'm merging this now. :clapper:

Before more PRs, let's figure out the direction we want to go with UI/UX improvements in #139. I'll follow up with another comment there shortly.

rebased onto 1f3dc33

3 months ago

Pull-Request has been merged by jflory7

3 months ago

@jflory7 sure :thumbsup: :thumbsup: :thumbsup: :thumbsup: :thumbsup: