WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. simplysimply88
    Member
    Posted 2 months 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 2 months 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;
    }

Reply

You must log in to post.

About this Plugin

About this Topic