Announcement

Collapse
No announcement yet.

CSS for Button Glow Effect on Hover

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Font Size
    #1

    vB5.X.X CSS for Button Glow Effect on Hover

    There is a new trend in web design these days and that is to have a glowing button effect for call to action (CTA) buttons in an other-wise clean and flat design. In this post, I will create a simple button and apply glow effect with CSS on it when user hovers over it. We can also use the CSS presented below to add a permanent glow effect to CSS buttons.

    Add the following code in the theme css_additional.css template you are using.

    HTML Code:
    /* all button hover glow s */
    .b-button:hover {
    background: #03e9f4;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
    }
    /* all button hover glow e */
    Demo: all buttons on this site


    How can I do?

    Similar Threads

  • Font Size
    #2
    I just added the code and looks amazing!!!!

    thank you! thank you!!


    yilmaz yilmaz likes this.
    https://cdn.discordapp.com/attachmen...ntitled-22.gif

    Comment


    • Font Size
      #3
      Awesome! thanks yilmaz

      Made this notes to remember what does what,.. i always forget, and i will like to change colors for my others templates in the future.
      I tested it quick, but tell me if i am mistaken

      Code:
      /* all button hover glow s */
      .b-button:hover {
      background: #03e9f4; /*button color*/
      color: #fff; /*button text color*/
      border-radius: 5px; /*border size*/
      box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4; /*glow color*/
      }
      /* all button hover glow e */
      Nessa Nessa yilmaz yilmaz like this.

      Comment


      • Font Size
        #4
        emi 👋
        It works just like you labeled it.
        Nessa Nessa emi emi like this.

        Comment

        X

        Thread Information

        Collapse

        Users Browsing this Thread

        There are currently 1 users browsing this thread. (0 members and 1 guests)

          Those who read this thread

          Collapse

          Working...
          X

          AdBlock Detected

          Please Disable Adblock

          Please consider supporting us by disabling the ad blocker.

          I've Disabled AdBlock