Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Bootstrap PRO button help

nathangrieve10 free asked 5 years ago


Using the outline bootstrap button, how would I make it so that when I hover over, the background of the button turns a different colour like grey while keeping the white outline?

Also, how would I make it so that the button can have the 'smooth-scroll' effect to smooth it's way down the page to another section without having it in a UL class? (UL class messes with other styling - positioning)

https://mdbootstrap.com/snippets/jquery/nathangrieve10/1054301?action=forum_snippet


Adam Jakubowski staff answered 5 years ago


Hi,

If you want your button to change color on hover, add this .btn-outline-primary:hover{ background-color: grey !important; } into your css code. For your second question, I don't quite understand, could you give an example or explain more precisely, please ?

Best,

Adam


nathangrieve10 free commented 5 years ago

thanks for your reply, I was meaning like when you click it to take you to another section on the page (e.g. about me section). Instead of it just teleporting there instantly. How would I get it so that it scrolls down smoothly to that section?


Adam Jakubowski staff commented 5 years ago

if you want to add SmoothScroll here you have an example in the documentation https://mdbootstrap.com/docs/jquery/javascript/scroll/#smooth-scroll just do as in the example just give the same id for the button that has the section you want to refer to


nathangrieve10 free answered 5 years ago


Bump Question - Premium



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.8
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes