You are currently viewing Customizing A Link to Look like a Button

Customizing A Link to Look like a Button

One of my favorite plugins is The Events Calendar, with both a free and Pro version to choose from, because it works well and can be customized to suit your needs. I had a site with The Events Calendar and on the event details page there were links, near the bottom, that all looked the same, but I wanted the last link for Event Site to appear like a button, so that it would stand out in a Green color:

Green Button

By examining the CSS, I was able to customize this last link to be a Green color, styled as a button, matching the accent color on the site.


1
2
3
4
5
6
7
/* Event Pages */
.tribe-events-event-url a {
    background-color:#81d742; /* Green */
    color:#ffffff!important; /* White */
    padding:5px 15px;
        text-decoration:none;
}

The next customization was for the hover effect, I wanted the background to change from Green to Black, alerting the visitor that they could click that button:

Black Hover color

The CSS to do this is:


1
2
3
.tribe-events-event-url a:hover {
    background-color:#000;
}

There you have it, the customization of The Events Calendar plugin now makes my site look different than default settings, and with a button, draws more attention to the visitor to click the button.

Leave a Reply