【Rails】マウスオーバーで背景が黒くなるのを解消する方法

Ruby on Railsアイキャッチ画像

結論

divタグで囲う

具体例

<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
  <div class="signup_button">
    <%= link_to new_registration_path(resource_name) do %>
    <button type="button" class="signup_submit_button"><%= t(".sign_up") %></button>
    <% end %>
  </div>
<% end %>

.signup_submit_button {
  display: inline-block;
  width: 180px;
  text-align: center;
  font-size: 14px;
  color: gray;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 24px;
  border-radius: 20px;
  background-image: linear-gradient(-90deg, #FFFF00, #FFCE0D);
  transition: .5s;
  background-size: 200%;
  border-width: 0px
}

.signup_submit_button:hover {
  background-position: right;
}

これだと、マウスオーバーで、テキストの輪郭で背景が黒いのが出てきてかっこ悪い。

そこで、buttonタグをdivで囲うと、、、

<div><button type="button" class="signup_submit_button"><%= t(".sign_up") %></button></div>

黒いのが現れない!!!

コメント