没有默认按钮布局的JQuery按钮效果

Question

我正在尝试将jquery按钮效果添加到仅用于鼠标悬停的链接，并且没有默认按钮布局。

我创建了this js fiddle。

以下是我开始使用的代码：

<div class="ui-widget ui-widget-content" style="border: 0px;">
    <a href="#" class="buttonize">Register</a>
    <a href="#" class="buttonize">Login</a>
</div>

$(document).ready(function () {
    $('.buttonize').button()
                .removeClass('ui-state-default')
                .css({'font-weight': 'normal', 'border': '0'});
});

首先，使用默认的jquery ui主题是否有更好的方法，因为我必须使用它们而不是我的CSS。

其次，如果按钮文本默认是正常的并且ui主题在ui-state-hover中具有粗体字体，则当悬停时链接会扩大，这会移动页面上的所有其他元素，因此问题如何检测是否链接字体是正常的而不是粗体，然后在悬停时删除粗体效果。

我根据我的想法创建了另一个js fiddle：

当前代码作为按钮链接的jquery插件是：

$('.buttonize').each(function(){
    $(this).button();
    $(this).removeClass('ui-state-default');
    $(this).css({'border': '0'});
    var fontWeight = $(this).css('font-weight');
    if (!(fontWeight == 'bold' || fontWeight == '700')) {
        $(this).css({'font-weight': 'normal'});
    }
});