How to Apply and Remove Styles with button using toggle in Lightning Component

<aura:component >
    <span aura:id="sfc" >SalesforceCodes</span><br/><br/><br/><br/>
    <lightning:button label="Add Style" onclick="{!c.addstyle}"/>
    <lightning:button label="Remove Style" onclick="{!c.Removestyle}"/>
    <lightning:button label="toggle" onclick="{!c.Toggle}"/>
</aura:component>

({
	addstyle : function(component, event, helper) {
        var targetcmp=component.find("sfc");
        $A.util.addClass(targetcmp,'external');
	},
    Removestyle : function(component, event, helper) {
        var targetcmp=component.find("sfc");
        $A.util.removeClass(targetcmp,'external');
    },
    Toggle : function(component, event, helper) {
        var targetcmp=component.find("sfc");
        $A.util.toggleClass(targetcmp,'external');
    }
})

.THIS.external {
    color:white;
    background-color:green;
}

<aura:application extends="force:slds" >
    <c:Basic2 />
</aura:application>