You are here: Home / Documentation / How To's / How to make your links look like buttons

How to make your links look like buttons

by nguyen — published May 17, 2013 12:35 PM, last modified Aug 16, 2016 10:50 AM

If you'd like to make links on the page appear more button-like, include the following CSS in your ZMI / portal_skins / custom / ploneCustom.css:

/* =============================  
    DECORATIVE BUTTONS
============================= */ 

a#decorativebutton{
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding:10px;
background: #499bea; /* Old browsers */
background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #499bea 0%,#207ce5 100%); /* IE10+ */
background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
color:white;
width:150px;
text-align:center;
}

a#decorativebutton:hover {
background: #b0d4e3; /* Old browsers */
background: -moz-linear-gradient(top,  #b0d4e3 0%, #88bacf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b0d4e3), color-stop(100%,#88bacf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b0d4e3 0%,#88bacf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b0d4e3 0%,#88bacf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
color:white !important;
}

Then edit the HTML of your link to include 'id="decorativebutton"' in the "<a>" tag, e.g.

<a href="http://google.com" id="decorativebutton">google.com</a>

Id suggest rather than modifying the HTML that you go into your Kupu or TinyMCE settings and add a new style to your "styles" list so you can choose it from the style drop down. It will keep you from having to mess with HTML or having to tell your users (if your an integrator) to mess with HTML.

Navigation