Special class to style link like button

[erickdeoliveiraleal]

@Aragorn have answered me about this in Sentinel Theme http://forum.primefaces.org/viewtopic.p ... 97#p145479, but the class he created doesn't work in Omega. Can someone help me?

[mert.sincan]

Please try;

Code: Select all

<style type="text/css"> 
    .MyLink.ui-link {
        color: #ffffff !important;
        background: #2399e5;
        border: 1px solid #1f89ce;
        border-radius: 3px;
    }

    .MyLink.ui-button-text {
        text-decoration: none;
        font-family: "latoregular","Trebuchet MS",Arial,Helvetica,sans-serif;
        font-size: 1em; /* you can change this value 1em or 90% */
        font-weight: bold;
        padding: 0.45em 1em 0.3em 0.55em;
    }

    .MyLink.ui-button-icon-only {
        padding: 0.3em 0 0.3em 0.6em;
        width: 1.65em;
    }

    .MyLink.ui-button-text:hover,
    .MyLink.ui-button-text:focus{
        background: #1f89ce;
        border: 1px solid #156090;
        outline: 0 none;
    }

    .MyLink.ui-button-text:active {
        background: #186ba0;
        border: 1px solid #156090;
    }

    .MyLink.fa::before{
        display: inline-block;
        font-family: "FontAwesome";
        color: #ffffff !important;
    }

    .MyLink.fa::before{
        margin-right: 8px; /* you can change this value */
    }
    
    .ui-fluid .MyLink.fa::before{
        margin-right: 48%; /* you can change this value */
    }
    
    .ui-fluid .MyLink.ui-button-icon-only.fa::before {
        padding-left: 49%; /* you can change this value */
    } 
    
    .ui-fluid .MyLink.ui-link {
        box-sizing: border-box;
        width: 100%;
    }
</style>

<h:outputText value="CommandButton:" />
<p:commandButton icon="fa fa-home" value="test" />

<h:outputText value="Link:" />
<p:link styleClass="ui-button-text MyLink fa fa-home" value="test" />

<h:outputText value="CommandButton(Only icon):" />
<p:commandButton icon="fa fa-home" />

<h:outputText value="Link(Only icon):" />
<p:link styleClass="ui-button-text MyLink fa fa-home ui-button-icon-only" /> 

[erickdeoliveiraleal]

Please try;

Code: Select all

<style type="text/css"> 
    .MyLink.ui-link {
        color: #ffffff !important;
        background: #2399e5;
        border: 1px solid #1f89ce;
        border-radius: 3px;
    }

    .MyLink.ui-button-text {
        text-decoration: none;
        font-family: "latoregular","Trebuchet MS",Arial,Helvetica,sans-serif;
        font-size: 1em; /* you can change this value 1em or 90% */
        font-weight: bold;
        padding: 0.45em 1em 0.3em 0.55em;
    }

    .MyLink.ui-button-icon-only {
        padding: 0.3em 0 0.3em 0.6em;
        width: 1.65em;
    }

    .MyLink.ui-button-text:hover,
    .MyLink.ui-button-text:focus{
        background: #1f89ce;
        border: 1px solid #156090;
        outline: 0 none;
    }

    .MyLink.ui-button-text:active {
        background: #186ba0;
        border: 1px solid #156090;
    }

    .MyLink.fa::before{
        display: inline-block;
        font-family: "FontAwesome";
        color: #ffffff !important;
    }

    .MyLink.fa::before{
        margin-right: 8px; /* you can change this value */
    }
    
    .ui-fluid .MyLink.fa::before{
        margin-right: 48%; /* you can change this value */
    }
    
    .ui-fluid .MyLink.ui-button-icon-only.fa::before {
        padding-left: 49%; /* you can change this value */
    } 
    
    .ui-fluid .MyLink.ui-link {
        box-sizing: border-box;
        width: 100%;
    }
</style>

<h:outputText value="CommandButton:" />
<p:commandButton icon="fa fa-home" value="test" />

<h:outputText value="Link:" />
<p:link styleClass="ui-button-text MyLink fa fa-home" value="test" />

<h:outputText value="CommandButton(Only icon):" />
<p:commandButton icon="fa fa-home" />

<h:outputText value="Link(Only icon):" />
<p:link styleClass="ui-button-text MyLink fa fa-home ui-button-icon-only" /> 

Working, thank you.

[mert.sincan]

Glad to hear, thanks for the update