Styling p:link to look like a Button ?

[paulkeogh]

Hi,

Any suggestions on how I can style a p:link to look like a button ?

I have tried;

Code: Select all

	<p:link value="View All" outcome="search"
		icon="fa fa-bars"
		styleClass="OrangeButton RaisedButton" />

but its not quite what I want.

Thanks,

[mert.sincan]

Please try with this css;

Code: Select all

/* CSS */
<style type="text/css"> 
    .MyLink.ui-link {
        color: #ffffff !important;
        display: inline-block;
        width: 162px;
        border-radius: 2px;
        font-size: 14px !important;
        font-weight: normal;
        padding: 10px 18px !important;
        line-height:normal;
        font-family: "robotoregular"; 
    }
    .MyLink.RaisedButton:hover {
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    }
    .MyLink.OrangeButton:hover {
       background-color: #fca537 !important;
    }
    .MyLink.fa::before{
        display: inline-block;
        margin-right: 32%;  /* you can change this value */
        font-family: "FontAwesome";
    }
    
    .ui-fluid .MyLink.ui-link {
        box-sizing: border-box;
        width: 100%;
    }
    .ui-fluid .MyLink.fa::before{
        margin-right: 44%; /* you can change this value */
    }
</style>

/* XHTML */
<p:link value="View All" styleClass="OrangeButton RaisedButton MyLink fa fa-bars">

I think you can change the value of CSS feature according to the needs.

Screenshot;

[paulkeogh]

That works well, thanks !

[mert.sincan]

Glad to hear, thanks