Implement Css and Js function on Custom Button in Ionic

Question

I am Trying to Create Custom Button in Ionic.

So, My Question Is I want to Implement Both CSS Method And Controller.js Function Method To my HTML File Class Button. How to add both Methods to button??

Html File

<div>
<button class="custom_btn"> 
</button>

style.css File Code:

.custom_btn {

    width: 200px;
    height: 200px;
    padding: 10px;
    line-height: 50px;
    text-align: left;
    text-indent: 10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    color: #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #333;
    background-color: white;
    cursor: pointer;
    margin: 20px;
}

Controller.js File Code

in Controller.js File I am performing some Action on Button When it's Tapped

$scope.btnClicked = function()
{
//Perform some Action When it's Clicked
 }

Custom Button On Screen is displaying as per CSS Code but It's not Calling Function Method.Please Provide any solution.thanks.

Dah Person · Accepted Answer · 2017-01-02 22:39:32Z

1

Change your button to

<button class="custom_btn" onclick="whenButtonIsClicked()"> 
</button>

And your JS code to

function whenButtonIsClicked() {
//actions to perform
}

Explanation: The onclick property of the button tells the whenButtonIsClicked() function to run when the button is clicked. A framework is not necessary for this action.

answered Jan 2, 2017 at 22:39

Dah Person

3993 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehul D Over a year ago

Thanks for your Answer @Dah. Using onclick it was not working I changed with ng-click instead.And it is working Fine.Thanks for ur help!!

Collectives™ on Stack Overflow

Implement Css and Js function on Custom Button in Ionic

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related