WordPress.org

Forums

Alligator Popup
[resolved] using alligator popup with a button (2 posts)

  1. simplysimply88
    Member
    Posted 1 year ago #

    hey there!

    amazing plugin!

    i have just a quick question for you. i would like to have a popup window appear with a button on my site. i've been able to use alligator popup with regular text, but i can't figure it out with a button.

    i'm using bridge theme.

    would you know if this can work? i hope so, i love the plugin!

    website: simplymba.com. in that first call to action right below the header image, i would like the "try it" button to launch the popup, if possible.

    thanks!

    https://wordpress.org/plugins/alligator-popup/

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Plugin Author

    Posted 1 year ago #

    This was originally posted in the forum for 'Alligator Menu Popup', however 'Alligator Popup' is the appropriate plugin for links in content and I believe that is the one you are actually using so I've moved this topic to the 'Alligator Popup' forum.

    You can add some CSS to your child theme or by using a custom CSS plugin to style your link as a button.

    For example:

    a.popup {
    	background: #3498db;
    	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    	background-image: -o-linear-gradient(top, #3498db, #2980b9);
    	background-image: linear-gradient(to bottom, #3498db, #2980b9);
    	-webkit-border-radius: 8;
    	-moz-border-radius: 8;
    	border-radius: 8px;
    	font-family: Arial;
    	color: #ffffff;
    	font-size: 20px;
    	padding: 10px 20px 10px 20px;
    	text-decoration: none;
    	position: relative;
    }
    
    .popup:hover {
    	background: #3cb0fd;
    	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    	text-decoration: none;
    }
    
    .popup:active {
    	top: 1px;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Alligator Popup
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic