CakePHP Form button Customize

Posted on



how to

  • Add the class you want to adapt to create
<?= $this->Form->create(null, ['class'=> 'aaa' , 'url' => ['controller' => 'Advices', 'action' => 'heart']]); ?>
<?= $this->Form->hidden( 'advice_id', ['value'=>$advices->id ]); ?>
<?= $this->Form->button(__('Heart')) ?>
<?= $this->Form->end() ?>
  • How to write on the button of the class
.aaa .button, .aaa button, .aaa input[type='button'], .aaa input[type='reset'], .aaa input[type='submit'] .aaa {
    background-color: #db116c;
    border: 0.1rem solid #db116c;
}
  • Appearance after change

Appearance after change




A little more

  • Image of unpressed heart
<?= $this->Form->button(__('♡')) ?>
.aaa .button, .aaa button, .aaa input[type='button'], .aaa input[type='reset'], .aaa input[type='submit'] .aaa {
    background-color: #f1f2f4;
    border: 0.1rem solid #606c76;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 2rem;
    color: #606c76;
}

Alt Text


  • Image of pressed heart
<?= $this->Form->button(__('♥')) ?>
.aaa .button, .aaa button, .aaa input[type='button'], .aaa input[type='reset'], .aaa input[type='submit'] .aaa {
    background-color: #db116c;
    border: 0.1rem solid #db116c;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 2.3rem;
    color: white;
}

Alt Text


Leave a Reply

Your email address will not be published. Required fields are marked *