CSS按钮是网页设计中经常用到的重要元素之一，使用CSS可以轻松创建出各种款式的按钮。其中，有个非常常见的按钮样式就是具有蓝色边框的按钮，下面我们来看看如何实现这个效果。

button {/* 设置按钮的基本样式，如背景色、文字颜色 */background-color: #ffffff;color: #333333;padding: 10px 20px;border: none;border-radius: 25px;font-size: 16px;cursor: pointer;}button:focus, button:hover {/* 设置鼠标悬停或者获取焦点时按钮的样式 */box-shadow: 0px 0px 5px #0074d9;}button:focus {/* 获取焦点时，设置按钮边框的样式 */outline: none;border: 2px solid #0074d9;}

上面的CSS代码中，我们首先设置了按钮的基本样式，包括背景色、文字颜色等。这里的边框样式是没有设置的，因为我们想要在获取焦点时才添加边框样式。

在按钮获取焦点时，我们使用了伪类选择器:focus来设置按钮的样式。这里，我们添加了一个蓝色的阴影效果，让按钮看起来更加醒目。对于鼠标悬停时的效果，我们也添加了相同的阴影效果。

最重要的样式是在:focus伪类下，我们添加了一个2px的蓝色边框。这里需要注意的是，要先将按钮的原有border样式设置为none，这样才能正确添加边框。

使用这些简单的CSS样式，我们就可以轻松地创建出一个带有蓝色边框的按钮。